Description
- Global alerts are triggered by system events.
- They appear as a fixed, full-width strip, on top of the screen throughout the application.
Different states and types
Success
Success alerts should be used when an action was performed successfully.
check_circleclose
Your account has been successfully migrated to the new user interface.
Your account has been migrated.
content_copy
<div class='alert alert-global alert-success'>
<i class='eos-icons eos-18'>check_circle</i>
<div class='alert-body'>
<!-- Place desktop text here [the message should not be more than 65 characters long]-->
<div class='alert-global-desktop'>Your account has been successfully migrated to the new user interface.</div>
<!-- Place mobile text here [the message should not be more than 40 characters long]-->
<div class='alert-global-mobile'>Your account has been migrated.</div>
</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.
infoclose
The new Patch Finder 2.0 will be released soon.
You can see the details of this update.
Patch Finder 2.0 will be released soon.
content_copy
<div class='alert alert-global alert-info'>
<i class='eos-icons eos-18'>info</i>
<div class='alert-body'>
<!-- Place desktop text here [the message should not be more than 65 characters long]-->
<div class='alert-global-desktop'>The new Patch Finder 2.0 will be released soon.
You can <a href='#'>see the details </a>
of this update.
</div>
<!-- Place mobile text here [the message should not be more than 40 characters long]-->
<div class='alert-global-mobile'>
<a href='#'>Patch Finder 2.0 </a>
will be released soon.
</div>
</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.
warningclose
Your browser is outdated. For a better experience consider upgrading it to the latest version available.
Your browser is outdated. Consider upgrading it.
content_copy
<div class='alert alert-global alert-warning'>
<i class='eos-icons eos-18'>warning</i>
<div class='alert-body'>
<!-- Place desktop text here [the message should not be more than 65 characters long]-->
<div class='alert-global-desktop'>Your browser is outdated. For a better experience consider upgrading it to the latest
version available.</div>
<!-- Place mobile text here [the message should not be more than 40 characters long]-->
<div class='alert-global-mobile'>Your browser is outdated. Consider upgrading it.</div>
</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 the alert should be dismissible use a warning alert instead. In many cases like this, the user path can be changed to achieve better results without requiring a close button in the component.error
The connection has been lost. Check your connection and refresh this page.
The connection has been lost.
content_copy
<div class='alert alert-global alert-danger'>
<i class='eos-icons eos-18'>error</i>
<div class='alert-body'>
<!-- Place desktop text here [the message should not be more than 65 characters long]-->
<div class='alert-global-desktop'>The connection has been lost. Check your connection and refresh this page.</div>
<!-- Place mobile text here [the message should not be more than 40 characters long]-->
<div class='alert-global-mobile'>The connection has been lost.</div>
</div>
</div>