Modal

A modal is an overlay dialog used for important information, actions, or confirmations. The page behind it is dimmed and blurred to focus attention on the content.

Default

This is the page content. Select the button to open a modal — the background dims and blurs to focus attention on the dialog.

States

Modal Title

This is the modal body content. You can place any information, forms, or confirmation messages here.

Default Standard variant for general information or actions that need the user's attention. Pairs a secondary "Cancel" with a primary "Confirm".

Modal Title

This is the modal body content. You can place any information, forms, or confirmation messages here.

Destructive Used to confirm an irreversible action (e.g. delete, cancel a booking). The primary button is rendered in red so the consequence is unmistakable.

Modal Title

This is the modal body content. You can place any information, forms, or confirmation messages here.

Info Acknowledgement variant for non-critical messages or updates. Shows a single primary "Confirm" — there is nothing to cancel.

Modal Title

This is the modal body content. You can place any information, forms, or confirmation messages here.

Plain Notification with no actions; users dismiss via the close (×) icon. Has no buttons and no divider above the body.
Behaviour
Overlay and focus
  • Modals sit on top of the page content and block interaction with everything behind them.
  • The page is dimmed and lightly blurred to focus attention on the dialog.
  • Users can dismiss the modal via the close (×) icon, the Cancel button, the Esc key, or by selecting the dimmed background.
Specs
1
Title
  • States the purpose of the modal in a few words. Pair with a close (×) icon on the right.
  • Recommended max length: 100 characters.
2
Body
  • Holds the modal's body content — the message, form, or confirmation copy.
  • Recommended max length: 255 characters.
3
Action buttons
  • Lets the user confirm or cancel the action. Aligned to the right; primary action sits on the far right.
  • Recommended max: 2 buttons (one primary, one secondary).
1

Modal Title

2

This is the modal body content. You can place any information, forms, or confirmation messages here.

3
Dos and Don'ts
  1. Keep modal content concise — title, short body, and at most two actions.
  2. Limit actions to at most two buttons — typically one primary and one secondary.
  3. Reserve modals for important information, decisions, or actions that need the user's full attention.
  4. Avoid using a modal for non-essential messages — use inline notifications or toasts instead.
  5. Avoid stacking multiple modals on top of each other; resolve one before opening the next.