Alert
Um alerta exibe uma mensagem curta e importante de uma forma que atrai a atenção do usuário sem interromper o que ele estiver fazendo.
Importação
import { Alert } from '@escaletech/delta'
Utilização
Resultado
Loading...
Status
Use a prop status para definir o estilo de status do alerta.
Resultado
Loading...
Customização
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.
import { extendsTheme } from '@escaletech/delta'
export const theme = extendsTheme({
colors: {
alertBorderColor: '$neutralDark',
alertBackgroundColor: '$neutralLightest'
}
})
Tokens
| Token | Descrição |
|---|---|
| colors.alertBorderColor | Define a cor da borda do alerta |
| colors.alertBackgroundColor | Define a cor de fundo do alerta |
| colors.alertIconColor | Define a cor do icone do alerta |
Props
| Propriedade | Descrição | Tipo | Padrão | Obrigatório |
|---|---|---|---|---|
| title | Texto de título para o Alerta | string | - | ✅ |
| children | Texto de mensagem do alerta | ReactNode | - | ❌ |
| status | Status do alerta | default, info, success, warning, error | default | ❌ |