Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Close button

A close button dismisses surfaces such as modals, drawers, alerts, and toasts.

GitHubGitHub logocomponents/close-button
StorybookStorybook logocomponents/close-button
DesignUsageAccessibilityUpdates

Purpose

Dismiss with confidence

A visible, accessible close affordance tells users they can exit a surface — modal, drawer, or alert — without uncertainty.

Universal recognition

The × pattern is immediately understood across contexts, reducing the need for text labels in tight spaces.

Keyboard and pointer ready

Built-in focus and hover states ensure the button is reachable and operable for all users, regardless of input method.

Anatomy

1

Button container

2

Close icon

Configuration

Default

The close button is a compact dismiss control for surfaces like modals, drawers, alerts, and toasts.

Renders a compact dismiss control. Use wherever users need a clear way to close a surface such as a modal, drawer, alert, or toast.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: border-color-transparent under sgds/close-button means sgds/close-button/border-color-transparent.

sgds/close-button
CategoryComponent tokenSemantic tokenValueBorderborder-color-transparentsgds/border-color-transparent—border-radius-smsgds/border-radius/sm—border-width-1sgds/border-width/11pxColourcolor-fixed-darksgds/color-fixed-dark—color-fixed-lightsgds/color-fixed-light#F3F3F3Sizeicon-size-smsgds/icon-size/sm—Colourbg-translucentsgds/bg-translucent—bg-transparentsgds/bg-transparentTransparentSizedimension-24sgds/dimension/24—dimension-32sgds/dimension/32—Borderclose-btn-border-radiussgds/close-btn-border-radius—Outline Focusoutline-focussgds/outline-focus—Outline Offset Focusoutline-offset-focussgds/outline-offset-focus—

Usage

When to use

  • Use this component as supporting text or visual context that strengthens nearby content.
  • Use it when a short label or reference helps users interpret the surrounding interface more quickly.

When not to use

  • Do not rely on this component as the only explanation for an important action, state, or instruction.
  • Do not use long or decorative content when a short, direct label is enough.

Best practices

Keep the label concise

Short labels are easier to scan and support the main content without competing with it.

Do not make the label carry everything

When the label becomes too long or too vague, it stops helping users orient themselves.

Accessibility considerations

Built-in accessibility

  • Close buttons render native buttons with a close icon.
  • The component includes a default accessible name for the close action.

Labels and content

  • Use close button only for dismissing or closing nearby content.
  • Override the accessible label in the parent context when users need more specific wording.

Focus and interaction

  • Place the close button where users expect to find the dismiss action.
  • Return focus to a sensible trigger or next step after closing temporary content.

Keyboard interaction

KeyInteractionTabMoves focus from the close button to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused close button.SpaceActivates the focused close button.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for close buttonPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/close-button

Singapore Government Design System

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