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

System banner

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

GitHubGitHub logocomponents/system-banner
StorybookStorybook logocomponents/system-banner
DesignUsageAccessibilityUpdates

Purpose

Broadcast site-wide messages

System banners are designed for announcements that affect the entire service — planned maintenance, urgent alerts, or important policy updates.

Persistent and hard to miss

Unlike a toast, the system banner stays on screen until dismissed, ensuring important messages aren't lost when users navigate between pages.

Supports multiple announcements

When there's more than one message to convey, items cycle automatically — users can page through all announcements without the interface becoming crowded.

Anatomy

Scheduled maintenance will take place tonight from 10pm to 11pm. View details Update New SGDS guidance is now available for internal tools teams. Read more
1

Banner container

2

Content

3

Icon (optional)

4

Badge (optional)

5

Action (optional)

Configuration

Default

The system banner displays important site-wide messages that should remain visible until the user dismisses them.

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

Renders a persistent banner at the top of the page. Use for important messages that affect all users — such as maintenance notices, urgent alerts, or policy changes.

Playground

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

Structure

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

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-2-xs under sgds/system-banner means sgds/system-banner/padding-2-xs.

sgds/system-banner
CategoryComponent tokenSemantic tokenValuePaddingpadding-2-xssgds/padding/2-xs—padding-smsgds/padding/sm—Gapgap-2-xssgds/gap/2-xs4pxgap-smsgds/gap/sm12pxgap-xlsgds/gap/xl—gap-xssgds/gap/xs8pxTypographyfont-size-12sgds/font-size/12—font-size-14sgds/font-size/14—font-weight-regularsgds/font-weight/regular—line-height-16sgds/line-height/16—line-height-20sgds/line-height/20—Colourcolor-fixed-lightsgds/color-fixed-light#F3F3F3surface-fixed-darksgds/surface-fixed-dark—Sizedimension-64sgds/dimension/64—dimension-872sgds/dimension/872—

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 will take place tonight from 10pm to 11pm.
Keep the message specific

Use a clear message with one purpose so users can act or move on quickly.

Scheduled maintenance will take place tonight from 10pm to 11pm. Scheduled maintenance will take place tonight from 10pm to 11pm.
Do not stack competing messages

Multiple repeated messages compete for attention and make it harder to see what matters.

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 important 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

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for system bannerPlannedTBD

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