Pular para o conteúdo
UI

Alert

Exibe um destaque para chamar a atenção do usuário.

Exemplos

Regular

Emphasis

Success

Warning

Error

Em linha sem descrição

Com botão de fechar

Com ações

Com botão de fechar e ações

API

Alert

PropriedadeTipoValores possíveisPadrãoDescrição
variant"regular" | "emphasis" | "success" | "warning" | "error""regular", "emphasis", "success", "warning", "error""regular"Define o estilo semântico do alerta.
onClose() => void--Função chamada quando o botão de fechar é clicado. Quando informada, exibe o botão de fechar (um Dismiss).
closeLabelstring-"Fechar alerta"Label acessível do botão de fechar.
rolestring-"alert"Role ARIA do alerta. Use "status" para mensagens informativas e não urgentes.
classNamestring--Classes CSS adicionais para o container.
...propsTodas as props nativas de div--Permite passar qualquer outra propriedade padrão de div.

AlertTitle

PropriedadeTipoValores possíveisPadrãoDescrição
classNamestring--Classes CSS adicionais para o título.
...propsTodas as props nativas de div--Permite passar qualquer outra propriedade padrão de div.

AlertContainer

PropriedadeTipoValores possíveisPadrãoDescrição
classNamestring--Classes CSS adicionais para o container.
...propsTodas as props nativas de div--Permite passar qualquer outra propriedade padrão de div.

AlertIcon

PropriedadeTipoValores possíveisPadrãoDescrição
iconReact.ReactNode--Ícone exibido no alerta.
classNamestring--Classes CSS adicionais para o container do ícone.
...propsTodas as props nativas de div--Permite passar qualquer outra propriedade padrão de div.

AlertContent

PropriedadeTipoValores possíveisPadrãoDescrição
classNamestring--Classes CSS adicionais para o wrapper do conteúdo.
...propsTodas as props nativas de div--Permite passar qualquer outra propriedade padrão de div.

AlertDescription

PropriedadeTipoValores possíveisPadrãoDescrição
classNamestring--Classes CSS adicionais para a descrição.
...propsTodas as props nativas de div--Permite passar qualquer outra propriedade padrão de div.

AlertActions

PropriedadeTipoValores possíveisPadrãoDescrição
classNamestring--Classes CSS adicionais para o container de ações.
...propsTodas as props nativas de div--Permite passar qualquer outra propriedade padrão de div.

AlertButton

O AlertButton herda automaticamente a variante do Alert pai, então você não precisa informar a variante do alerta manualmente. Fora de um Alert, use alertVariant para definir a cor do botão; dentro de um Alert, alertVariant também vale e tem precedência sobre a variante herdada.

O visual é o do Button Medium (40px) na cor do alerta: regular usa o estilo Soft e basic o Basic, com o mesmo hover e foco do Button; desabilitado, mantém a cor do alerta com 50% de opacidade. Ícones sem classe de tamanho ficam com 20px; para 16px, passe className="size-4" no ícone.

PropriedadeTipoValores possíveisPadrãoDescrição
variant"regular" | "basic""regular", "basic""regular"Define o estilo visual do botão. Regular é o Button Soft (fundo suave); basic é o Button Basic (só texto, com fundo no hover). A cor vem da variante do Alert pai.
alertVariant"regular" | "emphasis" | "success" | "warning" | "error""regular", "emphasis", "success", "warning", "error"Variante do Alert pai; fora de um Alert, "regular"Cor do botão, igual à da variante do alerta. Fora de um Alert, define a cor; dentro, tem precedência sobre a variante herdada do Alert.
classNamestring--Classes CSS adicionais para o botão.
...propsTodas as props nativas de button--Permite passar qualquer outra propriedade padrão de button.