Alert
The Alert component displays an inline message to communicate important feedback within a page. It helps users understand status changes, errors, or required actions without interrupting their workflow.
Heads up
This workspace is in read-only mode.
Variants
Each variant has its own background, left accent border, and auto icon.
Info
Informational message with brand styling.
Success
Your changes have been saved successfully.
Warning
You are approaching your storage limit.
Danger
Your session has expired. Please sign in again.
With Action
Pass an action prop to render a button. Use actionPlacement to control layout.
Trial ends in 3 days
Upgrade to keep access to all features.
New features available
Check the changelog for the latest updates.
Dismissible
Pass onDismiss to render a close button. The caller controls visibility.
New features available
Check the changelog for the latest updates.
Custom Icon
Override the auto icon with any ReactNode.
Deployment started
Your app is being built and deployed.
Without Icon
Pass icon={null} to suppress the icon entirely.
All changes saved
Your document has been updated.
Maintenance scheduled
Expected downtime tonight at 11 PM.
Title Only
AlertDescription is optional — the alert works with just a title.
Email verified
Two-factor authentication is not enabled