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

Inline alerts

Inline alerts are used to notify a user of the status of an action within a component when the action is triggered in real time.


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.
close
content_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.
close
content_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.
close
content_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>