Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Modal

The modal component informs users about a specific task and may contain critical information that requires a decision.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Focus the user

Use modals when users need to read or act before returning to the page.

Confirm risky actions

Ask users to confirm destructive or hard-to-reverse actions.

Contain a short task

Keep the title, message, and actions in one focused surface.

Anatomy

Confirm submission
Review the information before you continue.
Slot content
Confirm
1

Title

2

Description (optional)

3

Slot content (optional)

4

Dismissible (optional)

5

Action (optional)

6

Scrim

Configuration

Size

Modals come in different sizes to match the weight of the task. Smaller sizes work for short confirmations, larger sizes give content room to breathe.

Medium modal
The default modal size.

Use this size for typical messages and short forms.

Cancel Confirm

Default size that suits most flows.

Close button

The close button gives users a clear exit. Hide it only when closing should be deliberate, such as in destructive flows.

With close button
Default behaviour shows a close icon.

Users can dismiss the modal from the header.

Got it

Default header includes a close icon.

Footer slot

Use the modal footer for actions that confirm, cancel, or complete the modal task.

Submit application?
Review your details before submitting.

The footer contains the actions that complete the modal task.

Cancel Submit

Use a footer when the modal asks the user to make a decision.

Structure

Confirm submission

Review the information before you continue.

The modal can contain short supporting content and clear actions.

Cancel Confirm

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedPaddingsgds-padding-md16pxTop padding of the modal content; offset of the modal close buttonGapsgds-gap-md16pxSpacing between items of the modal header title description; spacing between items of the modal footerMarginsgds-margin-none—Outer spacing of the content; value of the contentBordersgds-border-radius-md8pxCorner radius of the modal panelTypographysgds-font-size-24—Font size of the contentsgds-line-height-2424pxLine height of the contentsgds-line-height-40Height variesLine height of the contentSizesgds-dimension-640—Maximum width of the modal panelLayersgds-z-index-modal—Stacking layer of the modalTypographysgds-body-font-family—Font-family of the modal

Usage

When 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.

Best practices

Delete this draft?
This action cannot be undone.

Removing this draft will permanently delete its contents.

Keep draft Delete draft
Use a modal for decisions that need an immediate response

Use modals for confirmations, destructive actions, or short focused tasks that need a response first.

Saved

Your changes have been saved.

OK
Do not use a modal for non-blocking notifications

If users do not need to respond, use a toast or inline alert. Modals are disproportionate for routine messages.

Submit application
You will not be able to edit after submission.

Confirm that the information is correct before you continue.

Review again Submit application
Use clear, action-led button labels

Label the primary button with the verb that describes the outcome (Delete, Submit, Confirm), not Yes or OK.

Edit details

Update your details.

Confirm change

Are you sure you want to change this?

Do not stack modals on top of modals

Opening a second modal from inside the first hides context and traps focus. Resolve the current one first.

Sign out?

You will need to sign in again to continue.

Cancel Sign out
Keep the modal content short and focused

A modal should hold one task. If the content scrolls significantly, send users to a dedicated page instead.

New feature available
Check out the latest updates.

We have updated the dashboard with new charts.

Got it
Do not hide the close button without a reason

Give users a clear way to dismiss the modal. Only hide the close button when an explicit decision is required.

Accessibility considerations

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.

Keyboard interaction

KeyInteractionTabMoves focus from the modal content to the next focusable element.Shift+TabMoves focus to the previous interactive element.EscCloses the open modal when supported by the component.

Updates

DateVersionDescription19 May 2026v3.19.1Add margin to fullscreen mobile view for alignment in #673.15 Apr 2026v3.16.0Make close button optional in #583.27 Jan 2026v3.8.0New size extra large in #527.22 Sept 2025v3.4.0Replace modal with position static to avoid clashes with components like tooltip in #393.03 Sept 2025v3.3.1Modal size prop UI bug fix @clukhei in #347.

Roadmap

Planned itemStatusTargetFuture enhancements for modalPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/modal

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2