Alert
Displays a callout for user attention with semantic variants.
Installation
npx vayu-ui-cli@latest add alertUsage
Alert Example
Information
This is an informational alert to highlight something important.
Success
Your changes have been successfully saved.
Warning
Your account is about to expire. Please renew your subscription.
Error
There was an error processing your request. Please try again.
Anatomy
<Alert variant="info">
<Alert.Icon variant="info">
<Info className="w-5 h-5" />
</Alert.Icon>
<Alert.Content>
<Alert.Title>Title</Alert.Title>
<Alert.Description>Description text goes here.</Alert.Description>
</Alert.Content>
<Alert.Dismiss variant="info" alertTitle="Title" onClick={() => {}} />
</Alert>| Part | Description |
|---|---|
Alert | Root container with variant styling |
Alert.Icon | Icon wrapper with variant color |
Alert.Content | Flex wrapper for title and description |
Alert.Title | Heading rendered as <h5> |
Alert.Description | Body text below the title |
Alert.Dismiss | Dismiss button positioned top-right |
Accessibility
- Keyboard support: Alert.Dismiss is focusable via Tab and activatable with Enter or Space
- ARIA attributes: Root uses
role="alert"(warning/error) orrole="status"(info/success) with correspondingaria-livevalues - Focus behavior: Alert.Dismiss displays a variant-colored focus ring on focus-visible
Screen reader behavior
Info and success alerts use role="status" with aria-live="polite", so screen readers announce changes without interrupting the user. Warning and error alerts use role="alert" with aria-live="assertive", which causes an immediate announcement. The root has aria-atomic="true" so the full alert content is read on any change. Icons are marked aria-hidden="true" and are purely decorative. The dismiss button includes a descriptive aria-label such as "Dismiss error alert: Error".
Component Folder Structure
Alert/
├── Alert.tsx
├── AlertIcon.tsx
├── AlertTitle.tsx
├── AlertDescription.tsx
├── AlertContent.tsx
├── AlertDismiss.tsx
├── types.ts
├── index.ts
└── README.mdProps
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Visual style of the alert |
children | ReactNode | - | Content inside the alert |
className | string | - | Additional CSS classes |
Alert.Icon
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Variant for icon color |
children | ReactNode | - | Icon element to render |
className | string | - | Additional CSS classes |
Alert.Title
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
className | string | - | Additional CSS classes |
Alert.Description
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Description text |
className | string | - | Additional CSS classes |
Alert.Content
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Wrapper for title and description |
className | string | - | Additional CSS classes |
Alert.Dismiss
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Variant for focus ring styling |
alertTitle | string | - | Title for descriptive aria-label |
onClick | () => void | - | Callback when dismiss is clicked |
className | string | - | Additional CSS classes |