Alert
Displays a callout for user attention with contextual feedback.
Installation
import { Alert, AlertTitle, AlertDescription } from "@ramp-ds/ui"Usage
Heads up!
You can add components to your app using the CLI.
Examples
With Icon
Note
This is an informational message with an icon.
Destructive
Error
Your session has expired. Please log in again.
Success
Success
Your changes have been saved.
Warning
Warning
Your session will expire in 5 minutes. Save your work.
Info
Did you know?
Press ⌘K anywhere to open the command palette.
Highlight
New feature
The theme switcher is now live — try swapping to Paper.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "success" | "warning" | "info" | "highlight" | "default" | The visual style of the alert. |
| className | string | - | Additional CSS classes. |
Accessibility
- Uses
role="alert"for screen readers - Icons should have appropriate aria-labels
- Color is not the only indicator of variant type
- Text content provides context for all users