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

System banner

The system banner component displays important messages at the application level.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Show service-wide messages

Use system banners for notices that affect the whole service.

Keep messages visible

A banner stays in the page flow until the service or user dismisses it.

Support multiple notices

Use banner items when several service messages need to share the same area.

Anatomy

Scheduled maintenance will take place tonight from 10pm to 11pm. View details Update New service hours start next Monday. Learn more
1

Leading icon / Badge (optional)

2

Message

3

Action (optional)

4

Pagination (optional)

5

Dismissible - Close button (optional)

6

Container

Configuration

Dismissible

Adds a close button so users can dismiss the banner once they have read it.

Scheduled maintenance from 1am to 3am on Sunday.

Banner stays visible. Use for persistent system-level messages.

Container width

Constrains the banner to the application max-width or stretches it across the full screen.

Scheduled maintenance from 1am to 3am on Sunday.

Default. Content is constrained to the standard application width.

Action

Pass an action element such as a link or button into the banner item to deep-link to more details.

Scheduled maintenance from 1am to 3am on Sunday. Learn more

Includes an inline action. Use to direct users to status page or details.

Multiple items

Up to five banner items can cycle automatically every five seconds, with pagination controls.

Scheduled maintenance from 1am to 3am on Sunday.

Only one message, so pagination is hidden.

Structure

Scheduled maintenance will take place tonight from 10pm to 11pm. View details

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-mainnav-mobile-padding-x—Space between the left and right edges of the component and its contentsgds-padding-sm—Space between the top and bottom edges of the component and its contentsgds-padding-2-xs—Padding of the banner itemGapsgds-gap-2-xs4pxSpacing between items of the paginationsgds-gap-sm12pxSpacing between items of the banner item; spacing between items of the banner item message_and actionsgds-gap-xl—Spacing between items of the bannersgds-gap-xs8pxSpacing between items of the banner item message_and actionMarginsgds-margin-2-xl—Outer spacing of the clamped containerTypographysgds-font-size-12—Font size of the paginationsgds-font-size-14—Font size of the banner item textsgds-font-weight-regular—Font weight of the banner item textsgds-letter-spacing-normal—Letter spacing of the banner item textsgds-line-height-16Height variesLine height of pagination textsgds-line-height-20Height variesHeight of the actionSizesgds-icon-size-xs—Size of the banner item iconsgds-mainnav-max-widthWidth variesMaximum width of the banner containerPaddingsgds-mainnav-padding-x—Desktop horizontal padding of the banner containerSizesgds-dimension-64—Minimum height of the bannersgds-dimension-872—Maximum width of the clamped container

Usage

When to use

  • Use this component to communicate a clear system state, status, or next step at the right moment.
  • Use it when users need immediate feedback that is tied to a task, outcome, or page context.

When not to use

  • Do not use this component for routine body content that should stay in the normal page flow.
  • Do not stack multiple messages of the same priority when one clear message is enough.

Best practices

Scheduled maintenance from 1am to 3am on Sunday. View status page
Use system banners for service-wide announcements

Reserve system banners for service-wide messages. Planned downtime, advisories, or beta indicators.

Complete the highlighted fields before submitting this form.
Do not use system banners for page-specific feedback

Messages tied to a single screen or action belong in an inline alert. The system banner is for the whole app.

Some services may be slower than usual. Learn more
Keep banner copy short and scannable

Lead with the headline message because users may only glance, then use an action link for more context.

Reminder: tax season starts on 1 March. New onboarding flow is now live. We have updated the privacy policy. Try the new search experience. Office hours have changed for the festive period.
Do not stack many banner items at once

Items rotate automatically, but too many dilute urgency. Limit to the highest priority and remove stale ones.

A new privacy policy takes effect on 1 May. Read the policy
Make time-bound banners dismissible

Allow users to dismiss informational messages once read. Reserve persistent banners for ongoing system states.

Your changes have been saved.
Do not use a system banner in place of a toast

Confirmations like Saved or Sent are short-lived. Show them as a toast, not a system banner.

Accessibility considerations

Built-in accessibility

  • System banners expose application-level messages as an alert region.
  • Pagination and dismiss actions use SGDS icon button and close button controls.

Labels and content

  • Use system banners for application-level messages.
  • Keep each message short and action-oriented.

Focus and interaction

  • Users should be able to reach banner actions without losing their place in the page.
  • Auto-cycling pauses on focus and hover in the SGDS implementation.

Keyboard interaction

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

Updates

DateVersionDescription19 May 2026v3.19.1Vertical center align icon on desktop in #675.12 Mar 2026v3.14.0Update the alignment of the header components in #566.02 Mar 2026v3.12.0New badge slot in #550.16 Feb 2026v3.10.0NoClampAction prop to make show more clamped action optional in #539.18 Dec 2025v3.6.0New system banner component in #475.

Roadmap

Planned itemStatusTargetFuture enhancements for system bannerPlannedTBD

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/system-banner

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