Flag

Notificação persistente em linha, com borda lateral semântica e suporte a ações. Diferente do Toast (auto-dismiss, sobreposto à tela), a flag é incorporada ao layout da página e permanece até o usuário dispensá-la explicitamente. Dark mode automático via variáveis semânticas.

components/flag.csscomponents/flag.jsAbrir no Figma

Uso

Quando e como utilizar cada variante da flag de acordo com o contexto.

• Success — Confirmação de operação concluída que exige reconhecimento do usuário.
• Warning — Situação que requer atenção mas não bloqueia o fluxo.
• Error — Falha ou erro que precisa de ação corretiva antes de prosseguir.
• Info — Informação relevante e persistente sobre o contexto atual.

Use flag quando a mensagem precisa permanecer visível enquanto o usuário trabalha na página. Para feedback transitório de ações rápidas, use o Toast. Para mensagens embutidas em formulários, use o Alert.

Exemplos

Veja abaixo os exemplos interativos da flag com todos os seus estados e variantes.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Container	.flag	Wrapper com borda lateral 4px e padding 16px
Ícone	.flag__icon	SVG 24x24 com cor semântica, alinhado ao topo
Body	.flag__body	Flex column com título, descrição e ações
Título	.flag__title	Texto principal, Inter 14px w600
Descrição	.flag__description	Texto secundário, Inter 14px w400
Ações	.flag__actions	Linha de botões de ação (opcional)
Fechar	.flag__dismiss	Botão ícone no canto superior direito

Propriedades

Classes, estados e atributos disponíveis para configurar a flag.

Propriedade	Tipo	Default	Descrição
.flag	classe	—	Container principal da notificação persistente.
.flag__icon	classe	—	Ícone semântico 24x24 alinhado ao topo.
.flag__body	classe	—	Área principal com título e descrição.
.flag__title	classe	—	Título da flag, Inter 14px w600.
.flag__description	classe	—	Texto descritivo, Inter 14px w400.
.flag__actions	classe	—	Container de botões de ação opcionais.
.flag__dismiss	classe	—	Botão de fechar no canto superior direito.
.flag--success	classe	—	Variante de sucesso (borda e ícone verdes).
.flag--warning	classe	—	Variante de aviso (borda e ícone amarelos).
.flag--error	classe	—	Variante de erro (borda e ícone vermelhos).
.flag--info	classe	—	Variante informativa (borda e ícone azuis).
.flag-group	classe	—	Container que empilha múltiplas flags com gap.
.is-dismissing	estado	—	Animação de saída antes da remoção do DOM.

Código

Snippets prontos para copiar e usar no seu projeto.

Flag simples

<div class="flag flag--info" role="status">
  <span class="flag__icon" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 48 48" fill="none" stroke="currentColor"
      stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
      <path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"/>
      <path d="M24 20V32"/>
      <path d="M24 14V15"/>
    </svg>
  </span>
  <div class="flag__body">
    <p class="flag__title">Período de manutenção programada</p>
    <p class="flag__description">O sistema ficará indisponível no dia 20/03 das 2h às 6h.</p>
  </div>
  <button class="flag__dismiss" aria-label="Dispensar">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
      viewBox="0 0 48 48" fill="none" stroke="currentColor"
      stroke-width="3" stroke-linecap="round">
      <path d="M8 8L40 40"/>
      <path d="M8 40L40 8"/>
    </svg>
  </button>
</div>

Flag com ações

<div class="flag flag--warning" role="alert">
  <span class="flag__icon" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 48 48" fill="none" stroke="currentColor"
      stroke-width="3" stroke-linejoin="round">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M24 5L2 43H46L24 5Z"/>
      <path d="M24 35V36" stroke-linecap="round"/>
      <path d="M24 19L24.008 29" stroke-linecap="round"/>
    </svg>
  </span>
  <div class="flag__body">
    <p class="flag__title">Cadastro incompleto</p>
    <p class="flag__description">Alguns campos obrigatórios ainda não foram preenchidos. Complete o cadastro para enviar o formulário.</p>
    <div class="flag__actions">
      <button class="btn btn-sm btn-warning">Completar agora</button>
      <button class="btn btn-sm btn-ghost">Lembrar depois</button>
    </div>
  </div>
  <button class="flag__dismiss" aria-label="Dispensar">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
      viewBox="0 0 48 48" fill="none" stroke="currentColor"
      stroke-width="3" stroke-linecap="round">
      <path d="M8 8L40 40"/>
      <path d="M8 40L40 8"/>
    </svg>
  </button>
</div>

Grupo de flags

<div class="flag-group">
  <div class="flag flag--error" role="alert">
    <span class="flag__icon" aria-hidden="true"><!-- ícone erro --></span>
    <div class="flag__body">
      <p class="flag__title">Falha ao salvar</p>
      <p class="flag__description">Não foi possível gravar os dados. Tente novamente.</p>
    </div>
    <button class="flag__dismiss" aria-label="Dispensar"><!-- ícone fechar --></button>
  </div>

  <div class="flag flag--success" role="status">
    <span class="flag__icon" aria-hidden="true"><!-- ícone sucesso --></span>
    <div class="flag__body">
      <p class="flag__title">Backup realizado</p>
      <p class="flag__description">Os dados foram arquivados com sucesso.</p>
    </div>
    <button class="flag__dismiss" aria-label="Dispensar"><!-- ícone fechar --></button>
  </div>
</div>

Uso programático

// Exibir flag via API global
window.ArenitoFlag.show({
  type: 'success',           // 'success' | 'warning' | 'error' | 'info'
  title: 'Registro salvo',
  description: 'Os dados foram gravados com sucesso.',
  actions: [
    { label: 'Desfazer', onClick: () => desfazerAcao() }
  ],
  dismissible: true          // padrão true
});

// Remover todas as flags
window.ArenitoFlag.clear();

Eventos

Evento customizado disparado ao dispensar a flag.

document.addEventListener('arenito:flag:dismiss', (e) => {
  console.log('Flag dispensada', e.detail.flag);
});

Evento	Descrição	detail
arenito:flag:dismiss	Disparado ao remover a flag pelo botão de fechar ou via API	{ flag }

Design

Especificações visuais e tokens utilizados no componente.

Especificações

Propriedade	Valor
max-width	400px
border-left	4px solid (cor semântica)
padding	16px
border-radius	6px
Ícone	24x24 SVG
Fonte título	Inter 14px w600
Fonte descrição	Inter 14px w400
Gap (ícone → body)	12px
Gap (título → descrição)	4px
Animação de saída	fade + translateX -8px, 200ms ease

Tokens utilizados

Variante	Fundo	Borda lateral	Ícone	Título	Descrição
Info	--surface-base-alert-container-info	--border-base-brand-default	--icon-base-brand-default	--text-base-neutral-default	--text-base-neutral-secondary
Success	--surface-base-alert-container-success	--border-base-success-default	--icon-base-success-default	--text-base-neutral-default	--text-base-neutral-secondary
Warning	--surface-base-alert-container-warning	--border-base-warning-default	--icon-base-warning-default	--text-base-neutral-default	--text-base-neutral-secondary
Error	--surface-base-alert-container-error	--border-base-error-default	--icon-base-error-default	--text-base-neutral-default	--text-base-neutral-secondary

Versão0.2.0

Última atualização15 mar 2026

Caminhosrc/components/flag.css