Alerts


Simple alerts

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

Outlined alerts

Two additional variants are available – outlined, and filled:

Filled alerts

Two additional variants are available – outlined, and filled:

Advanced alerts

You can use the AlertTitle component to display a formatted title above the content.

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.

Transition

You can use a transition component such as Collapse to transition the appearance of the alert.