Alert
Status messages and notifications
The Alert component displays important messages, notifications, and status information to users.
Basic Usage
<Alert Title="Information">
This is an informational alert message.
</Alert>Variants
Default
<Alert Title="Info">
This is a default alert message.
</Alert>Destructive
<Alert Variant="destructive" Title="Error">
This action cannot be undone.
</Alert>Success
<Alert Variant="success" Title="Success">
Your changes have been saved successfully!
</Alert>Warning
<Alert Variant="warning" Title="Warning">
Please check your input before submitting.
</Alert>Info
<Alert Variant="info" Title="Information">
New features are available in this update.
</Alert>Without Title
<Alert>
This is an alert without a title.
</Alert>With Icon
<Alert Variant="success" Title="Success">
<Icon>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</Icon>
Operation completed successfully!
</Alert>API Reference
| Property | Type | Default | Description |
|---|---|---|---|
Variant | string | default | Alert variant style |
Title | string | "" | Alert title text |
Icon | RenderFragment | null | Optional icon content |
ChildContent | RenderFragment | null | Alert message content |
Variant Options
defaultdestructivesuccesswarninginfo
Accessibility
The Alert component includes:
- Proper ARIA role (
role="alert") - Screen reader announcements
- Keyboard accessible
Installation
shellui add alert