Alert
v1.2.0Displays contextual messages and notifications.
Variants
Try clicking the different variant buttons below.
Deployment Update
A new deployment iteration was initialized automatically by your web webhook provider pipeline.
Beta Feature Configured
Hardware acceleration metrics can now be tracked in the infrastructure metrics panel tabs.
Payment Processed
Your receipt and premium seat upgrade licenses have been synchronized onto your user record profile.
Subscription Expiring
Your payment instrument will expire in 48 hours. Please update your billing methods immediately.
Connection Timed Out
The edge router cluster failed to return a proper heartbeat payload response. Retrying setup protocol sequence.
Dismissible Exit Animations
Click the close button to see the exit animation.
Fade Out Exit
Softly dissolves opacity layers into background vectors over a 300ms timeline step.
Slide Right Exit
Transforms horizontal layout metrics to fly off the right side edge during unmounting.
Slide Left Exit
Transforms horizontal layout metrics to fly off the left side edge during unmounting.
Immediate Unmount
Disappears instantly from the active node tree layout sequence with zero processing delays.
Custom Icon Overrides
Custom icons replace the default alert icon.
AI Optimization Complete
Vector index embedding structures have been clustered and fully cached to local database targets.
API Reference
All available props for this component.
Property | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'info' | 'success' | 'warning' | 'destructive' | 'default' | Dictates structural background color combinations and shifts accessible live-region roles dynamically. |
| exitAnimation | 'fade-out' | 'slide-out-right' | 'slide-out-left' | 'none' | 'fade-out' | Configures the specific unmounting visual transition path handled when executing close triggers. |
| title | string | undefined | Bold header text emphasizing the primary announcement statement of the alert. |
| description | string | undefined | Granular descriptive prose text providing secondary context, warnings, or next steps. |
| icon | React.ReactNode | Semantic Icon Base | Overrides default built-in SVG vector elements with a custom asset blueprint. |
| onClose | () => void | undefined | Appending a functional callback cleanly structures an absolute accessible dismiss button layout. |
| closeLabel | string | 'Dismiss alert' | Configures explicit hidden labels exposed to screen reader nodes identifying the target dismiss button action. |