Alert
Exibe um destaque para chamar a atenção do usuário.
Exemplos
Regular
Sua conta foi sincronizada com sucesso. Nenhuma outra ação é necessária.
Emphasis
Sua conta foi sincronizada com sucesso. Nenhuma outra ação é necessária.
Success
O pagamento foi confirmado e o seu acesso já está liberado.
Warning
O cartão selecionado foi recusado. Tente novamente com outra forma de pagamento.
Error
O cartão selecionado foi recusado. Tente novamente com outra forma de pagamento.
Em linha sem descrição
Com botão de fechar
Com ações
Com botão de fechar e ações
API
Alert
| Propriedade | Tipo | Valores possíveis | Padrão | Descriçã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). |
| closeLabel | string | - | "Fechar alerta" | Label acessível do botão de fechar. |
| role | string | - | "alert" | Role ARIA do alerta. Use "status" para mensagens informativas e não urgentes. |
| className | string | - | - | Classes CSS adicionais para o container. |
| ...props | Todas as props nativas de div | - | - | Permite passar qualquer outra propriedade padrão de div. |
AlertTitle
| Propriedade | Tipo | Valores possíveis | Padrão | Descrição |
|---|---|---|---|---|
| className | string | - | - | Classes CSS adicionais para o título. |
| ...props | Todas as props nativas de div | - | - | Permite passar qualquer outra propriedade padrão de div. |
AlertContainer
| Propriedade | Tipo | Valores possíveis | Padrão | Descrição |
|---|---|---|---|---|
| className | string | - | - | Classes CSS adicionais para o container. |
| ...props | Todas as props nativas de div | - | - | Permite passar qualquer outra propriedade padrão de div. |
AlertIcon
| Propriedade | Tipo | Valores possíveis | Padrão | Descrição |
|---|---|---|---|---|
| icon | React.ReactNode | - | - | Ícone exibido no alerta. |
| className | string | - | - | Classes CSS adicionais para o container do ícone. |
| ...props | Todas as props nativas de div | - | - | Permite passar qualquer outra propriedade padrão de div. |
AlertContent
| Propriedade | Tipo | Valores possíveis | Padrão | Descrição |
|---|---|---|---|---|
| className | string | - | - | Classes CSS adicionais para o wrapper do conteúdo. |
| ...props | Todas as props nativas de div | - | - | Permite passar qualquer outra propriedade padrão de div. |
AlertDescription
| Propriedade | Tipo | Valores possíveis | Padrão | Descrição |
|---|---|---|---|---|
| className | string | - | - | Classes CSS adicionais para a descrição. |
| ...props | Todas as props nativas de div | - | - | Permite passar qualquer outra propriedade padrão de div. |
AlertActions
| Propriedade | Tipo | Valores possíveis | Padrão | Descrição |
|---|---|---|---|---|
| className | string | - | - | Classes CSS adicionais para o container de ações. |
| ...props | Todas 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.
| Propriedade | Tipo | Valores possíveis | Padrão | Descriçã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. |
| className | string | - | - | Classes CSS adicionais para o botão. |
| ...props | Todas as props nativas de button | - | - | Permite passar qualquer outra propriedade padrão de button. |