Components
Alert
Basic Alerts
Alerts come in different severities to convey different levels of importance.
Neutral Alert
This is a neutral alert message to show important information to users.
Info Alert
This is a info alert message to show important information to users.
Warning Alert
This is a warning alert message to show important information to users.
Error Alert
This is a error alert message to show important information to users.
Alerts with Actions
Alerts can include action buttons to provide users with immediate options.
Neutral Alert with Actions
This is a neutral alert with action buttons.
Info Alert with Actions
This is a info alert with action buttons.
Warning Alert with Actions
This is a warning alert with action buttons.
Error Alert with Actions
This is a error alert with action buttons.
Custom Icons
You can customize the alert icon to better match your message context.
Neutral Alert with Custom Icon
This alert uses a custom icon instead of the default one.
Info Alert with Custom Icon
This alert uses a custom icon instead of the default one.
Warning Alert with Custom Icon
This alert uses a custom icon instead of the default one.
Error Alert with Custom Icon
This alert uses a custom icon instead of the default one.
Custom Icon Colors
The icon color can be customized independently of the alert severity.
Neutral Alert with Custom Icon Color
This alert uses a custom icon color.
Info Alert with Custom Icon Color
This alert uses a custom icon color.
Warning Alert with Custom Icon Color
This alert uses a custom icon color.
Error Alert with Custom Icon Color
This alert uses a custom icon color.
Without Title
For simpler messages, alerts can be displayed without a title.
This is a neutral alert without a title to show a more compact version.
This is a info alert without a title to show a more compact version.
This is a warning alert without a title to show a more compact version.
This is a error alert without a title to show a more compact version.