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.

Plain Notification with no actions; users dismiss via the close icon. Has no buttons and no divider above the body.
Professional working at a laptop in a bright workspace

Modal Title

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

Image An image can be added above the content.
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.
  • When title, image, or body content exceeds the available height, the content area scrolls while the action buttons stay fixed at the bottom.
Specs

Content of the modal are added using a WYSIWYG editor.
Text alignment (Left/Center), bullet, hyperlinks to be used appropriately.

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.
  • When content is long, the image, title, and body scroll together; action buttons stay visible in the footer bar.
3
Action buttons (Optional)
  • Text customisable
  • Recommended max: 2 buttons (one primary, one secondary).
4
Image (Optional)
  • Added using WYSIWYG editor
  • Image: 560x315px, JPG, <300KB
4 Professional working at a laptop in a bright workspace
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. When using the Image variant, let the image support the message — keep the essential meaning in the title and body, and always provide alt text.
  5. Avoid putting essential information only in the image.