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

Usage

Because alerts are meant to inform the user of important information, they should be used sparingly and be well-targeted to the page, section, or inline element they refer to. Following these rules when using alerts in your interface will help present a cohesive experience.


Text message

All alerts include an area for text. Section alerts must include a title above the message. Although alerts support content of various length, when writing an alert message try to be descriptive but concise. Be sure to follow the writing guides when writing content for your messages.

Links

Alerts can include a link to provide more information or to redirect the user to the next step. Conventions and rules should be followed when including URL in alerts.

Button usage

Alerts are meant solely to inform the user of important information. As such, buttons or other form elements are not allowed in alerts.

check_circleDo
error
Expired subscriptions
2 of your systems’ subscriptions have expired. To stop seeing this message renew your subscriptions or delete the systems from your organization.
cancelDon't
error
Expired subscriptions
2 of your systems’ subscriptions have expired and you can no longer access the systems. To stop seeing this message.

Dismissal

Alerts may be dismissible with a close icon, except for the danger alert which should always stay visible until the system detects the problem has been resolved. The close icon is always placed farthest to the right of the alert. If the content breaks into a new line, the close icon remains in top right corner.

Icons

All alerts may use icons to provide additional clarity. Icons are always placed to the left of the text or a title. If the content breaks into a new line, the icon remains aligned with first line or a title. When an alert background is same as the icon color, then the white icon should be used.

  • check_circlecheck_circleUse the check_circle icon from Material design for success alerts.
  • infoinfoUse the info icon from Material design for info alerts.
  • warningwarningUse the warning icon from Material design for warning alerts.
  • errorerrorUse the error icon from Material design for danger alerts.