Feedback
Alert
An alert (or snackbar, toast message, etc.) component. Used to display feedback to the user after an action, but also to emphasise an element on a page (for a notice for instance).
Elements
The component is composed of multiple elements:
alertthe wrapperalert__titlemain text of the alertalert__subtitlesmaller text below the title (optional)alert__closeclose icon (use only for toast messages)
<div class="alert alert--success">
<p class="alert__title">Alert title</p>
<p class="alert__subtitle">Alert content</p>
<button type="button" class="alert__close"></button>
</div>Alert title
Alert content
Properties
Add classes to the wrapper class to change the style of the component.
Color
Changes the color to convey the severity of the alert.
class="alert alert--success"
Success
Alert content
class="alert alert--info"
Info
Alert content
class="alert alert--warning"
Warning
Alert content
class="alert alert--error"
Error
Alert content
Notice
Add the following class to override the default absolute positioning to display the alert in the content.
class="alert alert--success alert--notice"
Notice
Alert content
Bar
Add the following class to override the default absolute positioning to display the alert as a bar at the bottom of the page. This variant does not have an icon.
class="alert alert--success alert--bar"
Dense
Make the alert component smaller (eg. if it is used for a form notice).
class="alert alert--success alert--dense"
Dense
Alert content
No icon
Remove the icon left of the alert.
class="alert alert--success alert--noIcon"
No icon
Alert content