Alert

Box that requires user attention.

Unable to remove item

This action cannot be undone

Per documentation, the alert role should not be displayed on page load, rather it should be used as a way to communicate important information to the user after an action, such as form submission.

This helps assistive technologies understand when to notify users of changes.

Structure

The alert uses most elements (ideally just a div) with a alert role to work as a in-page alert.

Preconfigured and layouted are several elements <svg> for icons, <p> for the title and <small> for the description. Each can be removed and the layout will adapt to show correctly.

Examples

Styles

Alert can convey a different meaning based on its style. Beside the default style, there's only one other style available.

Use destructive to indicate a negative action.

Default

A default alert

Icons

Alerts can have an icon to represent the purpose of the alert more clearly.

Simply add an <svg> element inside the alert to show an icon.

An alert with an icon

An alert with an icon

And a title, too
Built by ahme.dev. The source code is available on Github