Components

Notification

Overview

Overview

When to use

• Advise the user that they should be aware of, or address something related to their current context.
• Reaffirm to the user that a prior action, likely in a different location or context, has been successful.

When not to use

• Do not use notification component to highlight general content or as a banner.

Principles

Notifications relevant to an entire page should be placed at the top of that page, below the page header. Notifications related to a section of a page, should be placed inside that section, below any section heading.

Use notifications thoughtfully and sparingly for only the most important information and keep the messaging concise and actionable (if needed). A user should be able to quickly scan the notification, be apprised of the situation, and know what to do next.

The width of notifications varies based on content and layout. They can expand to the fill the container or content area they relate to. Their height is based on the content length, which should not exceed 100 characters.

If a notification requires a message longer than 100 characters, use an actionable notification and include a short message with a “View more” link that takes the user to the full message. This can be either a full page with more details or a modal.

Variants

Neutral

Use for:

• information the user should know, but is not critical
• tips or information which the user can benefit from
• messages which don't require too much attention or action.

Success

Use for:

• notifying the user that a task has been completed successfully.

Critical

Use for:

• notifying when something goes wrong or the user is denied completing their task. Explain why and what to do.

Actions

Notifications can contain 1-2 buttons or links that allows users to address the notification or navigates them to a page with further details. Close button may be omitted if a user is required to take the action to resolve the notification.

Usage

Usage guidelines

Content

Keep messages short and precise. Do not include more than one message in one container.

Do

Don't

Don't

Text format

Use bold to highlight parts of text if necessary. Do not bold all the message text.

Do

Don't

Icons

Do not remove the icon from any notification, as it is essential for reinforcing the meaning of the message.

Do

Don't

Accessibility

Keyboard

The notification itself is not focusable. Its action links and the dismiss button are in the normal Tab order: Enter follows a link, and Enter or Space activates the dismiss button.

Screen readers

Notifications are live regions. A danger notification (iconDanger) has role="alert" and interrupts the screen reader; all others have role="status" and are announced politely once the user is idle. The notification is named by its visible title through aria-labelledby. Status icons are aria-hidden="true", so the meaning is carried by the text. The dismiss button is named "Sulge" (closeLabel).

Using the example

• Write the title so it makes sense on its own ("Taotlus on saadetud"). It is what screen readers announce.
• Use role="alert" (the danger variant) only for problems that need attention now. Everything else should stay a polite status.
• Leave ariaLabel empty. It replaces the visible title as the name, and the two must never say different things.
• Action links are styled as buttons but are links. Use them only for navigation.
• On Estonian pages the default "Sulge" is fine; on other pages pass a closeLabel in the page language.

Known limits

• A live region is only announced when it is added to the page or its content changes. A notification that is already in the HTML when the page loads is not read out. Insert it into an existing container after the event, or move focus to it.
• The dismiss button has no script. Your code must remove the notification and move focus to a sensible place, such as the next heading, so keyboard focus is not lost.