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

Components

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

Close button

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Dismiss a surface

Use close buttons on dismissible surfaces such as modals, drawers, alerts, and toasts.

Use a familiar control

The close icon is recognised in compact surfaces where text would take too much room.

Support interaction states

Built-in hover, focus, and disabled states keep the control predictable.

Anatomy

1

Button container

2

Close icon

Configuration

Tone

The close button tone adjusts the icon colour so it remains visible on different background contexts.

The default tone for use on standard light surfaces such as modals, drawers, and inline alerts.

Size

Close button sizes let you match the visual weight of the dismiss control to the surface it sits within.

The default size. Use for most surfaces such as modals, drawers, and standard alerts.

Disabled

Use disabled only when the close action is temporarily unavailable and the reason is clear.

Use when the close action is available.

Structure

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 usedBordersgds-border-width-11pxBorder of the button closeSizesgds-dimension-32—Height of the button close; width of the button closeOutlinesgds-outline-focus—Focus outline of the button close when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the button close when keyboard-focusedBordersgds-close-btn-border-radius—Corner radius of the button close

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 a critical action, state, or instruction.
  • Do not use long or decorative content when a short, direct label is enough.

Best practices

Confirm changes
Review your changes before saving.

This surface can be dismissed without saving.

Use the close button to dismiss a transient surface

Pair the close button with surfaces users can leave without committing: modals, drawers, toasts, and alerts.

Save changes
Do not use the close button to confirm or commit a task

The close button only dismisses. For actions that save or submit work, use a labelled button so the outcome is clear.

Match the tone to the surface beneath it

Use fixed-light on dark surfaces and fixed-dark on light fixed surfaces so the icon keeps enough contrast.

Do not use the default tone on dark surfaces

On dark or strongly coloured backgrounds, the default tone can fall below contrast. Use a fixed tone.

Use the small size in dense surfaces

Set size to sm inside compact surfaces such as toasts or inline alerts so the dismiss control fits in.

Modal content shown far below the close button.
Do not place the close button far from the surface it dismisses

Anchor the close button inside or at the corner of the surface it controls so the relationship stays clear.

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

DateVersionDescription13 May 2026v3.19.0Remove unused style and set close icon size to be sm in #645.18 Dec 2025v3.6.0New close button component in #493.

Roadmap

Planned itemStatusTargetFuture enhancements for close buttonPlannedTBD

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

Past VersionsSGDS v1SGDS v2