Alerts
Simple alerts
The alerts offers four severity levels that set a distinctive icon and color.
This is an error alert — check it out!
This is a warning alert — check it out!
This is an info alert — check it out!
This is a success alert — check it out!
Outlined alerts
Two additional variants are available – outlined and filled.
This is an error alert — check it out!
This is a warning alert — check it out!
This is an info alert — check it out!
This is a success alert — check it out!
Filled alerts
Two additional variants are available – outlined and filled.
This is an error alert — check it out!
This is a warning alert — check it out!
This is an info alert — check it out!
This is a success alert — check it out!
Advanced alerts
You can use the AlertTitle component to display a formatted title above the content.
ErrorThis is an error alert — check it out!
WarningThis is a warning alert — check it out!
InfoThis is an info alert — check it out!
SuccessThis is a success alert — check it out!
Actions
An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert.
This is an success alert — check it out!
This is a success alert — check it out!