Alert messages provide contextual feedback for user actions.
To render an alert, use the class m-alert.
A contextual class (e.g. -warning) is required to provide proper styling.
<div class="m-alert -success" role="alert">This is a success alert</div>
<div class="m-alert -danger" role="alert">This is a danger alert</div>
<div class="m-alert -warning" role="alert">This is a warning alert</div>
<div class="m-alert -info" role="alert">This is an info alert</div>
<div class="m-alert -light" role="alert">This is a light alert</div>
<div class="m-alert -dark" role="alert">This is a dark alert</div>
Use icons to provide additional clarity. Icons can be added to any alert by applying the class -hasIcon
<div class="m-alert -success -hasIcon" role="alert">This is a success alert</div>
<div class="m-alert -danger -hasIcon" role="alert">This is a danger alert</div>
<div class="m-alert -warning -hasIcon" role="alert">This is a warning alert</div>
<div class="m-alert -info -hasIcon" role="alert">This is an info alert</div>
<div class="m-alert -light -hasIcon" role="alert">This is a light alert</div>
<div class="m-alert -dark -hasIcon" role="alert">This is a dark alert</div>
<div class="m-alert -danger -hasIcon" data-title="Danger" role="alert">
This is a danger alert
</div>
A button can be added to allow the user to dismiss the alert.
<div class="m-alert -warning -hasIcon" data-title="Warning" role="alert">
This is a warning alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>
Apply a -large class to increase the size of the alert.
<div class="m-alert -warning -large -hasIcon" data-title="Warning" role="alert">
This is a warning alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>For alerts that stretch the full length of the page, apply the class -banner.
This will remove the border-left, border-right, and border-radius from the alert.
Banner alerts are commonly used to remind new users to confirm their email address or notify users
when they are experiencing connectivity issues.
<div class="m-alert -banner -small -success -hasIcon" role="alert">
This is a success alert
</div>Toasts are unobtrusive alerts used to display brief, auto-expiring information.
To use a toast alert, apply the class -toast and ensure the alert
is placed in the top right corner or bottom left corner of the screen.
<div class="m-alert -toast -success -hasIcon" data-title="Success" role="alert">
This is a success alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>
<div class="m-alert -toast -danger -hasIcon" data-title="Danger" role="alert">
This is a danger alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>
<div class="m-alert -toast -warning -hasIcon" data-title="Warning" role="alert">
This is a warning alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>
<div class="m-alert -toast -info -hasIcon" data-title="Info" role="alert">
This is an info alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>
<div class="m-alert -toast -light -hasIcon" data-title="Light" role="alert">
This is a light alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>
<div class="m-alert -toast -dark -hasIcon" data-title="Dark" role="alert">
This is a dark alert
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>