Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationPrinciplesAccessibilityUsage and variationsDemos & APINumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Notifications

StableAccessible

Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases.

Principles

  • Notifications are designed to capture users' attention. Therefore, they should be used sparingly only for important information or updates.
  • Notification title should include the most important information about the notification. Aim for a title that is short, concise and easy to understand. Avoid titles that span over multiple lines.
  • HDS offers multiple options for notification screen locations. Choose locations that fit best for your service and stay consistent.
  • If you use automatically disappearing notifications, make sure the information is accessible elsewhere in case the user misses the notification.

When to use each notification type?

  • Use inline notifications when information is related to the content or if you want to keep information visible at all times. Inline notifications are part of the content and should therefore be placed as close as possible to the related part of the content. Inline notifications should not be added to the page dynamically.
  • Use toast notifications to inform the user about a specific event or change in the system status. Toast notifications do not relate to any specific object on the page and are therefore placed on top of the content (usually top right or bottom center).
  • Use invisible notifications to make system state changes more apparent for screen reader users. Some features (such as moving a product to the shopping cart) are apparent for regular users, but screen readers may need extra assist.

When to use each status colour (info, success, alert, error)?

  • You can find guidelines on when to use each status colour in the colour guidelines. Aim to use notification levels and colours consistently across your service.

Accessibility

  • Avoid using automatically disappearing toast notifications for critical information or very long messages. It is possible that the notification disappears before the user or screen reader can react to the message. Refer to WCAG 2.1 No timing requirement for more information.
  • Remember that colour should never be the only way of conveying information. Make sure the meaning of the notification is clearly described by the title and body. Refer to WCAG 2.1 Use of Colour guideline for more information.
  • It is recommended (but not required) to offer a way to turn off less important notifications. Refer to WCAG 2.1 Interruptions guideline for more information.
  • HDS Toast notifications use role="alert" which means they are immediately announced to the screen reader as the node is inserted to the DOM. Inline notifications do not need this role since they are created during page load.

Usage and variations

Inline

Inline notifications are used as part of the content. They closely relate to the part of the content and work best when placed as close to the related content as possible. Inline notifications are often used to provide or emphasise key information related to the content of the page. It is recommended not to make them closable - unless their information is not important or can be accessed somewhere else. Inline notifications greatly emphasise the information so they should be used sparingly in order not to dilute their effect. A good rule of thumb is to limit the number of simultaneous inline notifications to one.

Note! Inline notifications should not be added to the page dynamically. For this use case, use Toast notifications.

New messages
You have received new messages.
Form done
Form submit was successful!
Slow loading
Loading is taking longer than expected.
Missing information
Form is missing critical information.

Core code example:

<!-- Default -->
<section aria-label="Notification" class="hds-notification">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>
<span>New messages</span>
</div>
<div class="hds-notification__body">You have received new messages.</div>
</div>
</section>
<!-- Success -->
<section aria-label="Notification" class="hds-notification hds-notification--success">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--check-circle-fill" aria-hidden="true"></span>
<span>Form done</span>
</div>
<div class="hds-notification__body">Form submit was successful!</div>
</div>
</section>
<!-- Alert -->
<section aria-label="Notification" class="hds-notification hds-notification--alert">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>
<span>Slow loading</span>
</div>
<div class="hds-notification__body">Loading is taking longer than expected.</div>
</div>
</section>
<!-- Error -->
<section aria-label="Notification" class="hds-notification hds-notification--error">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--error-fill" aria-hidden="true"></span>
<span>Missing information</span>
</div>
<div class="hds-notification__body">Form is missing critical information.</div>
</div>
</section>

React code example:

<Notification label="New messages" dismissible>You have received new messages.</Notification>
<Notification label="Form done" type="success" dismissible>Form submit was successful!</Notification>
<Notification label="Slow loading" type="alert" dismissible>Loading is taking longer than expected.</Notification>
<Notification label="Missing information" type="error">Form is missing critical information.</Notification>

Toast

Toasts notifications provide lightweight feedback for changes in system status such as successful saving or Internet disconnection. Toasts appear on top of the content (usually top right or bottom center). Be wary using automatically disappearing toasts for critical information such as errors. It is also a good practise to make notifications accessible elsewhere in case the user misses them before they disappear.

Core code example:

<section aria-label="Notification" class="hds-notification hds-notification--top-right">
<div role="alert" class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>
<span>New messages</span>
</div>
<div class="hds-notification__body">You have received new messages.</div>
</div>
<button class="hds-notification__close-button" aria-label="Close toast" type="button" onclick="">
<span class="hds-icon hds-icon--cross" aria-hidden="true"></span>
</button>
</section>

React code example:

<Notification label="New messages" position="top-right" dismissible closeButtonLabelText="Close toast" onClose={() => setOpen(false)}>
You have received new messages.
</Notification>
<Notification label="New messages" position="top-right" dismissible autoClose closeButtonLabelText="Close toast" onClose={() => setAutoCloseOpen(false)}>
You have received new messages.
</Notification>

Notification sizes

HDS notifications come in three different sizes, allowing the designer to choose depending on the situation and notification importance.

New messages
You have received new messages.
New messages
You have received new messages.
New messages
You have received new messages.

Core code example:

<!-- Large -->
<section aria-label="Notification" class="hds-notification hds-notification--large">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>
<span>New messages</span>
</div>
<div class="hds-notification__body">You have received new messages.</div>
</div>
</section>
<!-- Default -->
<section aria-label="Notification" class="hds-notification">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>
<span>New messages</span>
</div>
<div class="hds-notification__body">You have received new messages.</div>
</div>
</section>
<!-- Small -->
<section aria-label="Notification" class="hds-notification hds-notification--small">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>
</div>
<div class="hds-notification__body">You have received new messages.</div>
</div>
</section>

React code example:

<Notification size="large" label="New messages (only visible to screen readers)">You have received new messages.</Notification>
<Notification size="default" label="New messages (only visible to screen readers)">You have received new messages.</Notification>
<Notification size="small" label="New messages (only visible to screen readers)">You have received new messages.</Notification>

Invisible

Invisible notifications do not show up on screen and they are meant to aid screen reader users. Some updates to system status may be apparent to regular users through animations etc. However, screen readers can easily ignore this type of feedback. Invisible notifications are not visible to regular users but screen readers detect them. Use them to improve user experience for screen reader users.

Core code example:

<div class="hiddenFromScreen" aria-atomic="true" aria-live="assertive" role="status">
<section aria-label="Notification" class="hds-notification">
<div class="hds-notification__content">
<div class="hds-notification__label" role="heading" aria-level="2">
<span class="hds-icon hds-icon--info-circle-fill" aria-hidden="true"></span>
<span>New messages</span>
</div>
<div class="hds-notification__body">You have received new messages. This notification is invisible.</div>
</div>
</section>
</div>

React code example:

<Notification label="New messages" invisible>You have received new messages. This notification is invisible.</Notification>

Demos & API

Core

Notifications in hds-core

React

Notifications in hds-react

Notifications API