Alert
Contextual feedback messages with 4 variants, optional title, built-in icons, and dismiss button.
Live Demo
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 | Type | Default | Description |
|---|---|---|---|
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. |
Usage
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>