Description
- They are often triggered in response to an action by the user.
- Inline alerts are positioned within the area or form they relate to.
- Alerts of high importance (warning or danger) should not close automatically, until the situation has been resolved.
Different states and types
Success
Success alerts should be used when an action was performed successfully.
check_circle
Settings saved.
closecontent_copy
<div class='alert alert-inline alert-success'>
<i class='eos-icons eos-18 alert-icon'>check_circle</i>
<div class='alert-body'>Settings saved.</div>
<a class='close' data-dismiss='alert'>
<i class='eos-icons eos-18'>close</i>
</a>
</div>Info
Info alerts should be used when there are tips or information that a user can benefit from.
info
New comments awaiting response.
closecontent_copy
<div class='alert alert-inline alert-info'>
<i class='eos-icons eos-18 alert-icon'>info</i>
<div class='alert-body'>
<a href='#'>New comments</a>
awaiting response.
</div>
<a class='close' data-dismiss='alert'>
<i class='eos-icons eos-18'>close</i>
</a>
</div>Warning
Warning alerts should be used for messages that likely require attention.
warning
Subscription expiring soon.
closecontent_copy
<div class='alert alert-inline alert-warning'>
<i class='eos-icons eos-18 alert-icon'>warning</i>
<div class='alert-body'>Subscription expiring soon.</div>
<a class='close' data-dismiss='alert'>
<i class='eos-icons eos-18'>close</i>
</a>
</div>Danger
Danger alerts should be used when the system has failed to perform an action, or when the user has made an error.
* Never include a close icon or link to dismiss the action. In cases when alert should be dismissible use warning alert instead.error
Subscription expired. Renew subscription.
content_copy
<div class='alert alert-inline alert-danger'>
<i class='eos-icons eos-18 alert-icon'>error</i>
<div class='alert-body'>
Subscription expired.<a href='#'>Renew</a> subscription.
</div>
</div>