The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Edit preferences
menu
more_horiz
  • More

Global alerts

Global alerts are used to inform users about important information related to the entire system and not just about a section or page.

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_circle
Your account has been successfully migrated to the new user interface.
Your account has been migrated.
close
content_copy
<div class='alert alert-global alert-success'>
 <i class='eos-icons md-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 md-18'>close</i>
 </a>
</div>

Info

Info alerts should be used when there are tips or information that a user can benefit from.

info
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.
close
content_copy
<div class='alert alert-global alert-info'>
 <i class='eos-icons md-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 md-18'>close</i>
 </a>
</div>

Warning

Warning alerts should be used for messages that likely require attention.

warning
Your browser is outdated. For a better experience consider upgrading it to the latest version available.
Your browser is outdated. Consider upgrading it.
close
content_copy
<div class='alert alert-global alert-warning'>
 <i class='eos-icons md-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 md-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 md-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>