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 -bubble -success" role="alert">This is a success alert</div>
<div class="m-alert -bubble -danger" role="alert">This is a danger alert</div>
<div class="m-alert -bubble -warning" role="alert">This is a warning alert</div>
<div class="m-alert -bubble -info" role="alert">This is an info alert</div>
<div class="m-alert -bubble -light" role="alert">This is a light alert</div>
<div class="m-alert -bubble -dark" role="alert">This is a dark alert</div>
<div class="m-alert -bubble -success" role="alert">
<i class="a-icon -sm2 icon-circle-check -text--success"></i>
This is a success alert
</div>
<div class="m-alert -bubble -danger" role="alert">
<i class="a-icon -sm2 icon-circle-warning -text--danger"></i>
This is a danger alert
</div>
<div class="m-alert -bubble -warning" role="alert">
<i class="a-icon -sm2 icon-warning -text--warning"></i>
This is a warning alert
</div>
<div class="m-alert -bubble -info" role="alert">
<i class="a-icon -sm2 icon-circle-info -text--info"></i>
This is a info alert
</div>
<div class="m-alert -bubble -light" role="alert">
<i class="a-icon -sm2 icon-circle-info-outline -text--light"></i>
This is a light alert
</div>
<div class="m-alert -bubble -dark" role="alert">
<i class="a-icon -sm2 icon-circle-info -text--dark"></i>
This is a dark alert
</div>
Use the class -center to center the icons.
<div class="m-alert -bubble -center -info" role="alert">
<i class="a-icon -sm2 icon-circle-info -text--info"></i>
Info alert with centered icon
</div>
Use the class -dismiss and a button to allow the user to dismiss the alert.
<div class="m-alert -bubble -dismiss -warning" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-warning -text--warning"></i>
This is a warning alert<button class="a-btn -icon -close -small">
</div>
<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 -bubble -large -dismiss -warning" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-warning -text--warning"></i>
<div>
<h5 class="a-h5">Warning</h5>
This is a warning alert
</div>
</div>
<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 -banner -dismiss -warning" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-warning -text--warning"></i>
This is a warning alert
</div>
<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 -bubble -large -warning" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-warning -text--warning"></i>
<div>
<h5 class="a-h5">Warning</h5>
This is a warning alert
</div>
</div>
</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 -center -success" role="alert">
<i class="a-icon -sm2 icon-circle-check -text--success"></i>
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" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-circle-check -text--success"></i>
<div>
<div class="a-h5">success</div>
This is a success alert
</div>
</div>
<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" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-circle-warning -text--danger"></i>
<div>
<div class="a-h5">danger</div>
This is a danger alert
</div>
</div>
<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" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-warning -text--warning"></i>
<div>
<div class="a-h5">warning</div>
This is a warning alert
</div>
</div>
<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" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-circle-info -text--info"></i>
<div>
<div class="a-h5">info</div>
This is a info alert
</div>
</div>
<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" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-circle-info-outline -text--light"></i>
<div>
<div class="a-h5">success</div>
This is a success alert
</div>
</div>
<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" role="alert">
<div class="m-alert__content">
<i class="a-icon -sm2 icon-circle-info -text--dark"></i>
<div>
<div class="a-h5">dark</div>
This is a dark alert
</div>
</div>
<button class="a-btn -icon -close -small">
<div class="a-btn__content">
<i class="a-icon icon-x"></i>
</div>
</button>
</div>