Alert

UsageDevelopment

About

An Alert is a component that belongs to the group of notification components. An Alert should communicate system triggered information only.

Anatomy

An Alert can be composed of one, two or three slots. Leading slot: this slot allows for an icon. The type of icon is related to the status of the Alert. Text slot: this slot allows for text, and optionally for an emphasised text and/or a text link. Trailing slot: this slot allows for an icon to close the Alert.

Alert component anatomy

An Alert has a few mandatory elements, and a lot of optional ones.

Alert elements

When to use an Alert

An Alert should be used for global notifications of medium importance that don’t necessarily require an action of users (right away).

When not to use an Alert

  • When the message communicated is a result of a user interaction;
  • When you need to interrupt users’ workflow. Consider a Dialog or Toast instead;
  • When there’s a success message to communicate. The Alert should only communicate Errors, Warnings, and (important) Information.
Do use an Alert for important, global notifications.
Do
Don’t use an Alert for contextual notifications that are a result of a user interaction.
Don’t

Behaviour

Statuses

An Alert allows for 3 different statuses to be added to give the notification more body:

  1. Information: used to provide additional information and notes to users that they may find helpful in context.
  2. Warning: used for notices of potential future errors.
  3. Error: used for system failures and user errors.

Alert behaviour

Persistency

  • If an Alert has no close icon: Alert is persistent;
  • If an Alert has a close icon: Alert is persistent until users take action to close. Preferably, an Alert contains a close icon to give users control.

Timing

  • Just one Alert can be visible at a time;
  • A developer is be able to set an ‘appearance time’ in case the Alert should have a specific start- and end time.

Keyboard behaviour

  • Users are able to close an Alert notification by focusing on the close icon and pressing Enter;
  • Users are able to activate a text button within an Alert notification by focusing on the text button and pressing Enter;
  • Users are able to navigate from a text button to the close icon by pressing Tab;
  • Users are able to go back and forth between text button(s) and the close icon by pressing the left & right arrows.

Size & placement

Size

The Alert takes 100% of the width of the screen. It might be users change the size of the screen, and therefore the Alert shrinks. In this case, the height automatically adjusts. However, we do have a maximum of characters. See ‘Content’.

Alert size

Placement

On both desktop and mobile, an Alert appears on top of the screen. It preferably pushes content down, and therefore doesn’t obscure any content.

Alert placement

Content

The overall text (headline + body text + CTA) can consist of 150 characters maximum.

  • Headline: A headline preferably consists of max 3 words. It should explain in short what happened or will happen. It does not need a dot to end the sentence.
  • Body text: A body text should explain in more detail what happened or will happen. Sometimes both a headline and a body text aren’t needed. In that case you only use the body text to explain.

Please take into account that 75 characters would be the optimal line length for readability.

Do use the headline to explain immediately what happened.
Do
Don’t use a vague headline that makes users read the body text.
Don’t

Other best practices

Do use the close icon to offer users a way to close an Alert for if the message is not critical to read and/or interact with.
Do
Don’t use an Alert without a close icon for notification messages that are not critical.
Don’t

Nesting components

An Alert can use:

  • Icon
  • Text link

An Alert can be used in:

  • Notification pattern

Resources