Alert

Componente de feedback contextual para mensagens do sistema. Disponível em 4 variantes semânticas, com suporte a ícone, título, ações e fechamento. Dark mode automático via variáveis semânticas.

components/alert.cssAbrir no Figma

Uso

Quando e como utilizar cada variante do alerta de acordo com o contexto da mensagem.

Default — Informações neutras e mensagens genéricas.
Success — Confirmação de ação concluída com êxito.
Warning — Atenção para situações que requerem cuidado.
Error — Erros e falhas que impedem o fluxo.

Não empilhe mais de 3 alertas na mesma região. Priorize a mensagem mais relevante.

Exemplos

Veja abaixo os exemplos interativos de cada variante do alerta, com todos os seus estados.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Container	`.alert`	Wrapper com padding, border-radius e cor de fundo
Content	`.alert-content`	Agrupa ícone e mensagem
Ícone	`.alert-icon`	Ícone SVG 18x18, cor semântica
Mensagem	`.alert-message`	Texto da mensagem, Inter 14px w400
Título	`.alert-title`	Título opcional, Inter 14px w500
Fechar	`.alert-close`	Botão de fechar (dismissible)
Ações	`.alert-actions`	Container para botões de ação

Propriedades

Classes, estados e atributos disponíveis para configurar o alerta.

Propriedade	Tipo	Default	Descrição
`.alert`	`classe`	—	Container principal do alerta.
`.alert-default`	`classe`	—	Variante neutra/informativa.
`.alert-success`	`classe`	—	Variante de sucesso.
`.alert-warning`	`classe`	—	Variante de aviso/atenção.
`.alert-error`	`classe`	—	Variante de erro.
`.alert-dismissible`	`classe`	—	Adiciona botão de fechar.
`.alert-fixed`	`classe`	—	Fixa o alerta no topo da tela.
`.alert-fixed-bottom`	`classe`	—	Fixa o alerta na base da tela.
`.alert-title`	`classe`	—	Título opcional dentro do alerta.
`.alert-actions`	`classe`	—	Container para botões de ação.

Código

Snippets prontos para copiar e usar no seu projeto.

Alerta simples

html

<div class="alert alert-success">
  <div class="alert-content">
    <span class="alert-icon">
      <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" 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="M16 24L22 30L34 18"/>
      </svg>
    </span>
    <span class="alert-message">Registro salvo com sucesso.</span>
  </div>
</div>

Alerta com título e fechamento

html

<div class="alert alert-warning alert-dismissible">
  <div class="alert-content">
    <span class="alert-icon">
      <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-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="alert-message">
      <div class="alert-title">Atenção</div>
      Esta ação não pode ser desfeita.
    </div>
  </div>
  <button class="alert-close" aria-label="Fechar">
    <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>

Design

Especificações visuais e tokens utilizados no componente.

Especificações

Propriedade	Valor
Padding	12px (--spacing-3)
Border-radius	6px
Fonte mensagem	Inter 14px w400
Fonte título	Inter 14px w500
Gap (ícone → texto)	8px (--spacing-2)
Ícone	18x18 SVG

Tokens utilizados

Variante	Background	Ícone	Texto
Default	`--surface-base-neutral-container-emphasis`	`--icon-base-neutral-default`	`--text-base-neutral-default`
Success	`--surface-base-alert-container-success`	`--icon-base-success-default`	`--text-base-success-default`
Warning	`--surface-base-alert-container-warning`	`--icon-base-warning-default`	`--text-base-warning-default`
Error	`--surface-base-alert-container-error`	`--icon-base-error-default`	`--text-base-error-default`

Alert ​

Uso ​

Exemplos ​

Anatomia ​

Propriedades ​

Código ​

Alerta simples ​

Alerta com título e fechamento ​

Design ​

Especificações ​

Tokens utilizados ​