On This Page

Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Basic alerts

The alert offers four severity levels that set a distinctive icon and color.

Success alert.
Success alert.
Info alert.
Warning alert.
Error alert.

Descriptive alerts

The alert offers four severity levels that set a distinctive icon and color.

Success

This is a success alert - check it out!

Info

This is a info alert - check it out!

Warning

This is a warning alert - check it out!

Error

This is a error alert check it out!

Alert With Button

An alert can have action, such as a close or undo button. It is rendered after the message, at the end of the alert.

If on 'Click' callback is provided and no action prop is set, a close icon is displayed.
The action prop can be used to provide an alternative action, for example using a button or icon button.

Success alert.
Success alert.
Wrong input!