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

Dialog

Overview

When to use

Use dialogs to focus user's attention on simple, single-step tasks, questions, or contextual messages.

When not to use

Don't use dialogs for multi-step flows or if the content is long, complex or is not important enough to interrupt the user's flow.

Principles​

Dialogs work best when they’re expected and initiated by a user’s action, like clicking a button or link.

When dialogs frequently appear for non-critical information, users may instinctively close them without reading the content. This increases the chance users dismiss important dialogs that appear later without giving them any thought.

When people enter a dialog task, they switch away from their previous context, so it is recommended to set the new context with a heading. Headings are crucial for screen reader users who cannot see the dialog appear on top of the previous context. The dialog’s heading should match or contain similar words to the button label users tapped to open it.

Dialogs shouldn’t contain large amounts of content or complex data. Keep them simple and focused. If the content is too long, it probably should have its own page.

Avoid showing multiple dialogs at the same time.

Size​

TDS has 4 standard widths for dialogs. Custom width may be defined if the content requires it.

  • Small: 480px
  • Medium: 640px
  • Large: 800px
  • Fluid: 90% width

On mobile, the width of a dialog is defined as 100% with 1-2rem margin on the left and right side.

Closing​

By default, dialogs can be closed by:

  • Primary button to submit their changes, e.g., “Save” or “Done”
  • “Cancel” button in the footer
  • ”X” icon on top right corner
  • Pressing ESC on the keyboard
  • Tapping the scrim behind the dialog

If the user is required to take action (for example, after some period of inactivity, continue using the site or log out) in order to dismiss the dialog, the “X” icon should not be visible and pressing ESC or tapping the scrim should not close the dialog.

Scrolling​

Try to keep the content of the dialog simple and concise. In case it’s not at all possible, the scroll behavior can be set so that scrolling happens inside the dialog body or the whole dialog scrolls within the viewport.

Destructive actions​

Dialogs can be used to confirm destructive actions, for example deleting something permanently. In this case a danger button should be used for the destructive action.