Alert
Mensagens de feedback contextual com 4 variantes, título opcional, ícones integrados e botão de fechar.
Demonstração
Information
This is an informational alert message.
Success
Your changes have been saved successfully.
Warning
Please review before proceeding.
Error
Something went wrong. Please try again.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Color and icon variant. |
title | string | — | Optional title displayed above the content. |
icon | ReactNode | false | Built-in SVG | Override the default icon. Pass false to hide it. |
onDismiss | () => void | — | Dismiss callback. When provided, shows an X button. |
children | ReactNode | — | Alert message content. |
Uso
import { Alert } from '@ghiberti85/ui'
// Variants
<Alert variant="info" title="Information">Informational message.</Alert>
<Alert variant="success" title="Success">Saved successfully.</Alert>
<Alert variant="warning" title="Warning">Proceed with caution.</Alert>
<Alert variant="error" title="Error">Something went wrong.</Alert>
// Dismissable
<Alert variant="info" onDismiss={() => setVisible(false)}>
Click X to dismiss.
</Alert>
// No icon
<Alert variant="success" icon={false}>No icon variant.</Alert>