Demand focused attention
Modals block the background to ensure users engage with critical information or complete a required action before continuing.
Modal
The modal component informs users about a specific task and may contain critical information that requires a decision.
GitHub
components/modal
components/modalStorybook
components/modal
components/modalConfirm before consequences
Use modals to confirm destructive or irreversible actions — deleting a record, submitting a form — so users don't act by accident.
Self-contained interactions
A modal should contain everything needed to complete its task — title, body, and clear actions — so users don't need to leave it to find context.
Confirm submission
Review the information before you continue.
The modal can contain short supporting content and clear actions.
1
Dialog surface
2
Title (slot)
3
Description (slot)
4
Content
5
Footer (optional)
Default
Modals are blocking dialogs that focus users on a single critical task or decision.
Confirm submission
Review the information before you continue.
The modal can contain short supporting content and clear actions.
Renders a blocking dialog that focuses users on a single task. Use for confirmations, destructive actions, or short flows that require a decision before the main page can continue.
Confirm submission
Review the information before you continue.
The modal can contain short supporting content and clear actions.
Confirm submission
Review the information before you continue.
The modal can contain short supporting content and clear actions.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: padding-md under sgds/btn means sgds/btn/padding-md.
sgds/modal
sgds/padding/mdsgds/padding/xlsgds/gap/2-xlsgds/gap/mdsgds/gap/smsgds/border-radius/mdsgds/font-size/24sgds/line-height/24sgds/line-height/40sgds/color-subtlesgds/surface-defaultsgds/bg-overlaysgds/dimension/480sgds/dimension/640sgds/dimension/800When to use
- Use modal for short, high-priority tasks that need the user's full attention before they continue.
- Use it when the interaction should block the page until users confirm, cancel, or complete one focused task.
When not to use
- Do not use modal for long forms, dense reference content, or multiple unrelated decisions.
- Do not trigger a modal when the same task can be completed in the page flow.
Confirm submission
Review the information before you continue.
The modal can contain short supporting content and clear actions.
Keep the decision focused
A modal should present one clear task with one clear next step.
Confirm submission
Review the information before you continue.
The modal can contain short supporting content and clear actions.
Confirm submission
Review the information before you continue.
The modal can contain short supporting content and clear actions.
Do not overload the modal
When a modal becomes too dense, users lose context and the interaction becomes harder to finish.
Built-in accessibility
- Modals expose their panel as a dialog with `aria-modal`.
- The component moves focus to the modal heading when it opens and restores focus to the trigger when it closes.
Labels and content
- Use a title that describes the decision or task.
- Keep modal content short enough for users to complete the task without losing context.
Focus and interaction
- Place actions after the message or form content they relate to.
- Avoid opening another modal from inside a modal.
TabShift+TabEscHave suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.