Alerts
Alerts provide contextual feedback messages for typical user actions, such as success, error, or warning notifications.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'info' | 'success' | 'warning' | 'error' | 'info' | The visual style of the alert. |
| title | string | - | An optional bolded title for the alert. |
| children | ReactNode | - | The main content or description of the alert. |
Variants
Use different variants to match the tone and importance of your message.
Info
This is an informational alert.
<Alert variant="info">This is an informational alert.</Alert>Success
This is a success alert.
<Alert variant="success">This is a success alert.</Alert>Warning
This is a warning alert.
<Alert variant="warning">This is a warning alert.</Alert>Error
This is an error alert.
<Alert variant="error">This is an error alert.</Alert>With Title
Order Completed
Your order has been successfully processed. You will receive a confirmation email shortly.
<Alert variant="success" title="Order Completed">
Your order has been successfully processed. You will receive a confirmation email shortly.
</Alert>