Alert

Mensagem inline sobre o contexto da tela, com indicador de estado.

O Alert avisa sobre algo ligado ao que a pessoa está fazendo agora: um problema que exige correção, uma condição que muda o resultado ou uma informação importante. Para confirmar uma ação concluída use Toast; para erro de campo use FieldError.

import { Alert } from "@rastreio-x/ui";

Padrão

O alerta é composto: indicador, e um conteúdo com título e descrição. O indicador usa o ícone do estado por padrão.

Rascunho salvo

As alterações da Marca ficam só no rascunho até você publicar.

Playground

Escolha o tom do alerta e edite o título para ver o resultado.

Rascunho salvo

As alterações ficam só no rascunho até você publicar.

Controles

status

Conteúdo

import { Alert } from "@rastreio-x/ui";

<Alert>
  <Alert.Indicator />
  <Alert.Content>
    <Alert.Title>Rascunho salvo</Alert.Title>
    <Alert.Description>
      As alterações ficam só no rascunho até você publicar.
    </Alert.Description>
  </Alert.Content>
</Alert>

Estados

Cinco estados em status. Cor nunca é o único sinal: o título diz o que aconteceu e o indicador traz um ícone.

Nova versão do catálogo

O catálogo de transportadoras recebeu a Trilha.

Prévia disponível

Abra a Página pública como o Cliente vai vê-la.

Marca publicada

A versão 3 já vale para novas Jornadas.

Domínio ainda sem verificação

A Página pública continua no endereço padrão.

Não foi possível publicar

Faltam o logo e o nome da Marca.

Estado	Quando usar
`default`	Informação neutra, sem urgência.
`accent`	Informação relevante da ação em curso, como a prévia.
`success`	Resultado positivo que a pessoa precisa ver na tela.
`warning`	Condição que pede atenção, mas não bloqueia.
`danger`	Problema que impede a ação até ser corrigido.

Com ação

Coloque a ação à direita no desktop e abaixo do texto no celular. O botão leva a variante do estado.

Fonte sem resposta

A Fonte Checkout Yampi não recebeu tentativas nas últimas 24 horas.

Dispensável

Quando o aviso pode ser dispensado, ofereça um CloseButton com aria-label. Avisos de erro que bloqueiam a ação não devem ser dispensáveis.

Perfil atualizado

Indicador próprio

Alert.Indicator aceita um ícone próprio quando o padrão do estado não descreve a situação, como uma tarefa em andamento.

Geocodificando o destino

O mapa do Pedido aparece em alguns segundos.

Anatomia

Alert
├── Alert.Content
├── Alert.Description
├── Alert.Indicator
└── Alert.Title

Alert.Indicator: ícone do estado, decorativo.
Alert.Content: coluna que agrupa título e descrição.
Alert.Title: uma frase curta com o fato, em Title Case ou frase simples.
Alert.Description: o que fazer ou por que importa; opcional.

Propriedades

Raiz (Alert):

Alert
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`status`	`'danger' \| 'success' \| 'default' \| 'accent' \| 'warning'`	-	Tom do alerta: `default`, `accent`, `success`, `warning` ou `danger`.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.

Indicador (Alert.Indicator):

Alert.Indicator
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.

Animações

Sem movimento
indicativo

O Alert é estático: não anima entrada nem saída por conta própria. Se você o montar e desmontar com estado, aplique a transição na camada da tela e respeite prefers-reduced-motion.

Acessibilidade

O Alert é um div sem papel próprio. Para avisos que surgem depois de uma ação, passe role="status" (informação) ou role="alert" (erro) para o leitor de tela anunciá-lo.
O ícone é decorativo (aria-hidden): o estado precisa estar também no texto do título.
CloseButton exige aria-label e é focável por teclado.
Contraste do texto de estado a 4,5:1 nos dois temas, pelos tokens *-text.

Boas práticas

Faça

Título com o fato e descrição com o próximo passo: Faltam o logo e o nome da Marca.

Evite

Título genérico como Erro ou Atenção, sem dizer o que aconteceu nem como corrigir.

Mostre o alerta perto do que ele afeta, não no topo da página.
Um alerta por problema; não empilhe cinco avisos da mesma causa.
Use danger só quando algo está bloqueado; warning para o que pede atenção.
Para resultado de uma ação rápida, prefira Toast.

Relacionados

Toast para confirmação que some sozinha.
Button para a ação do alerta.
Chip para o estado de um objeto, não de uma tela.