Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse Components

Components

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

Toast

Toast allows you to convey quick messaging notifications to the user.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Confirm without interrupting

Use toasts for short, non-blocking status messages.

Expire on their own

Autohide lets transient messages disappear after a short delay.

Keep the page usable

Toasts appear above the page while users continue their work.

Anatomy

Changes have been saved successfully. Undo
1

Icon

2

Title

3

Content

4

Action

5

Close button

6

Container

Configuration

Variant

Toast variants use colour and context to communicate the nature of the notification.

Changes have been saved successfully. Undo

Use to confirm that an action completed successfully, such as saving, submitting, or deleting an item.

Dismissible

Dismissible toasts give users control to clear them. Pair with autohide for transient messages and keep dismissible for messages users may want to read again.

This toast cannot be closed manually.

Toast remains until autohide or programmatic close.

Autohide

Autohide makes the toast disappear after a delay. Use it for confirmations or transient updates that do not need acknowledgement.

This toast stays until manually dismissed.

Toast persists until the user closes it or the app removes it.

Position

Toast position controls where the toast stack appears in the viewport.

Saved successfully.

Use top end for common non-blocking status updates.

Action and icon slots

Toast supports action and icon slots for brief follow-up actions and visual context.

Icon slot content
Draft saved.
Action slot content

Use slots only when the action or icon adds clear value to the message.

Delay

Delay controls how long an autohide toast remains visible.

Saved successfully.

Use the default 5000ms (5 seconds) delay for short, routine messages.

Structure

Changes have been saved successfully. Undo

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-md16pxSpace between the left and right edges of the toast and its contentsgds-padding-md16pxSpace between the top and bottom edges of the component and its contentsgds-padding-xl24pxRight padding of the toast contentGapsgds-gap-2-xs4pxSpacing between items of the toast bodysgds-gap-sm12pxSpacing between items of the toast; spacing between items of the toast contentsgds-layout-gap-md—Spacing between items inside the componentBordersgds-border-radius-md8pxCorner radius of the toastTypographysgds-font-size-label-sm—Font size of the toast body messagesgds-font-size-subtitle-sm—Font size of the toast body titlesgds-font-weight-regular—Font weight of the toast body messagesgds-font-weight-semibold—Font weight of the toast body titlesgds-line-height-2-xsHeight variesLine height of the toast body titleSizesgds-dimension-280—Minimum width of the toastsgds-dimension-480—Maximum width of the toastsgds-spacer-8—Value of the toast containerLayersgds-z-index-overlay—Stacking layer of the toast containerTypographysgds-font-size-subtitle-sm16pxFont size of the toast body titlesgds-font-weight-semibold600Font weight of the toast body titlesgds-line-height-2-xs20pxLine height of the toast body titlesgds-font-size-label-sm14pxFont size of the toast body messagesgds-font-weight-regular400Font weight of the toast body messageSpacingsgds-spacer-832pxValue of the toast containerLayersgds-z-index-overlay800Stacking layer of the toast container

Usage

When to use

  • Use toast for brief status updates that confirm an action or surface a timely non-blocking message.
  • Use it when users can continue their task without stopping to resolve the message immediately.

When not to use

  • Do not use toast for content that must stay visible until the user reads it.
  • Do not show several toasts in rapid succession for related updates.

Best practices

Your changes have been saved. Undo
Use a toast to confirm a non-blocking action

Toasts acknowledge background actions like save or send without interrupting the user's current task.

Your card was declined. The order has not been submitted.
Do not use a toast for critical errors that block progress

Errors that require action or block the task belong in an inline alert or modal, where they stay visible.

A new version of this service is available.
Match the variant to the nature of the message

Use success for confirmations, info for neutral updates, warning for issues, and danger for failures.

Report.pdf has been uploaded. Summary.pdf has been uploaded. Notes.pdf has been uploaded.
Do not show many toasts at the same time

Stacked toasts compete for attention. Surface only the most relevant, or batch related updates into one.

Your reply has been sent. View thread
Keep toast content short and pair with an action where useful

Keep to a brief title and one supporting line. Add an action like Undo or View when it helps recovery.

Your account has been suspended. You cannot access your records until this is resolved.
Do not use a toast as the only signal for critical information

Toasts dismiss themselves and may be missed. For must-read information, use a banner, modal, or inline alert.

Accessibility considerations

Built-in accessibility

  • Toasts expose their message as an assertive live alert when shown.
  • Dismissible toasts use the SGDS close button.

Labels and content

  • Use toast messages for short status updates.
  • Do not use a toast as the only place for critical instructions.

Focus and interaction

  • Do not move focus to a toast automatically for routine status updates.
  • If a toast includes a close button, it should remain reachable without interrupting the task.

Keyboard interaction

This component does not have a separate keyboard interaction table because:

  • Toast messages are status updates and should not take focus automatically.
  • Dismissible toasts use the close button's native keyboard behaviour.

Updates

DateVersionDescription17 Apr 2026v3.17.0Ui enhancements on spacings,icon, link sizes, typography in #595.17 Apr 2026v3.17.0Remove width to apply min-width in #602.13 Aug 2025v3.2.0Missing gap between title and body in #277.

Roadmap

Planned itemStatusTargetFuture enhancements for toastPlannedTBD

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

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