#Overview

An alert displays an important, clear message and can contain optional actions.

There are four variants:

1. Informational
2. Success
3. Warning
4. Error

#When to use

• To communicate important information that requires user attention

#Don’t use for

• Communicating information that should be permanently displayed
• Short, non-disruptive messages to inform the outcome of a user action (use a Toast)

#Anatomy

1. Container
2. Icon: Informs users of the kind of notification at a glance
3. Title (optional): Provides a quick overview
4. Description: Provides information and actionable steps for the user to take
5. Link (optional): Allows the user to engage with further details
6. Icon button (optional): Closes the alert

#Color

Galaxus

Digitec

1. Informational
2. Success
3. Warning
4. Error

#Spacing

1. Mobile
2. Desktop

#Best practices

#Understand at a glance

Do

Keep copy concise.

Don't

Don’t use generic titles.

#Frequency and icon

Don't

Try not to use more than one alert on a page.

Don't

Don’t change the icon.

#Placement

#Mobile

Alerts can be placed between items. When scrolling, alerts move with content and scroll off the screen.

#Desktop

#Links in alerts

#Galaxus

#Digitec

#Behavior

#Container

The alert’s container takes up 100% of the content width. The height depends on the content displayed.

#Appearing

Alerts are loaded together with all the other content. There is no need for additional transitions.

#Disappearing

Alerts can be dismissed.

Transitions:
scale: 100%
opacity: 100% to 0%
transition-duration: 160ms
transition-timing-function: ease;