Alert
FeedbackDisplay important messages and notifications with different severity levels. Supports icons, actions, and rich content.
import { Alert } from "@cohere-ai/waypoint-ui/alert";Live Preview
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'default' | Visual severity style |
className | string | - | Additional CSS classes |
Examples
Default Alert
Informational alert with title and description
1 import { Alert, AlertTitle, AlertDescription } from '@cohere-ai/waypoint-ui/alert'; 2 3 <Alert> 4 <AlertTitle>Heads up!</AlertTitle> 5 <AlertDescription>You can add components to your app using the CLI.</AlertDescription> 6 </Alert>
Destructive Alert
Error alert for critical messages
1 import { Alert, AlertTitle, AlertDescription } from '@cohere-ai/waypoint-ui/alert'; 2 3 <Alert variant="destructive"> 4 <AlertTitle>Error</AlertTitle> 5 <AlertDescription>Your session has expired. Please log in again.</AlertDescription> 6 </Alert>
Alert with Icon and Actions
Alert with an icon and action buttons
1 import { Alert, AlertIcon, AlertTitle, AlertDescription, AlertActions } from '@cohere-ai/waypoint-ui/alert'; 2 3 <Alert> 4 <AlertIcon><InfoIcon /></AlertIcon> 5 <AlertTitle>New version available</AlertTitle> 6 <AlertDescription>A new version of the app is ready to install.</AlertDescription> 7 <AlertActions> 8 <Button size="sm">Update now</Button> 9 <Button variant="ghost" size="sm">Later</Button> 10 </AlertActions> 11 </Alert>
Additional Resources
Accessibility
Note: Uses role="alert" for immediate announcement to screen readers. Grid layout adapts automatically when AlertIcon is present.
Design Guidelines
Do
Use 'default' for informational or neutral messages.
Use 'destructive' for errors, data loss warnings, or irreversible actions.
Don't
Use alerts for success states — use a Toast or Banner instead.
Stack multiple alerts; prioritize the most important one.
Found an Issue?
If you've encountered a bug or have feedback about the Alert component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.