Alert
Displays a callout for user attention.
When To Use
Use alerts to highlight important information that requires the user's attention. They are useful for:
- Displaying success, error, warning, or information messages
- Providing feedback on user actions
- Highlighting important changes or updates
- Drawing attention to critical information
- Providing contextual help or guidance
Examples
Information
This is a standard alert providing information to the user.
Note
Alerts can be customized with additional classes to change their appearance.
Warning
You can style alerts with custom colors to indicate different levels of importance.
Error
Your session has expired. Please log in again to continue.
Critical Error
This alert uses the destructive variant with custom styling for a more intense error message.
Information
This alert includes an information icon for additional context.
Warning
This destructive alert has an alert circle icon to emphasize the message.
Success
Your changes have been saved successfully.
Notification
You have 3 new messages in your inbox.
Props
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |