Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Components

Notification

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.

Options​

Actionable​

Contains 1-2 buttons or links that allows users to address the notification or navigates them to a page with further details.

Dismissible​

Notifications do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification.

A small “x” in the top right corner is used to dismiss inline notifications. Including the close button is optional and should not be included if it is critical for a user to read or interact with the notification.