Shows important information on a page. Can contain a hint, signal a status change, or indicate a problem.

By default, alerts are styled conservatively and stand out only by the icon color. If the block gets lost on screen, you can draw attention to it using the colored background variant.

The block can be hidden by clicking the icon button in the corner of the alert. If the system reports a problem, the alert is displayed permanently and the user cannot close it.

The alert can contain links and buttons; the icon and heading can be omitted. In a lengthy notification, the text can be split into paragraphs.

Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.