Confirm actions without interrupting
Toasts appear briefly to acknowledge that something worked — a save, a deletion, a form submission — without stopping the user mid-task.
Toast
Toast allows you to convey quick messaging notifications to the user.
GitHub
components/toast
components/toastStorybook
components/toast
components/toastDisappear automatically
Toasts dismiss themselves after a few seconds, so users don't have to manually close them to continue working.
Non-blocking by design
Unlike a modal, a toast doesn't prevent interaction with the page — users can keep working while the notification is visible.
1
Toast surface
2
Title
3
Body content
4
Action
Variant
Toast variants use colour and context to communicate the nature of the notification.
Use to confirm that an action completed successfully — such as saving, submitting, or deleting an item.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: padding-md under sgds/toast means sgds/toast/padding-md.
sgds/toast
sgds/padding/mdsgds/padding/xlsgds/gap/2-xssgds/gap/smsgds/border-radius/mdsgds/font-size/label-smsgds/font-size/subtitle-smsgds/font-weight/regularsgds/font-weight/semiboldsgds/line-height/2-xssgds/color-subtlesgds/link-color-defaultsgds/surface-defaultsgds/primary/color/defaultsgds/success/color/defaultsgds/danger/color/defaultsgds/warning/color/fixed-lightsgds/dimension/280When 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 important content that must stay visible until the user reads it.
- Do not show several toasts in quick succession for related updates.
Keep the toast brief
A short message with one clear outcome helps users recognise what just happened.
Do not use toast for permanent guidance
If users need the content to stay visible, it should not disappear on its own.
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 important 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.
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.
Have suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.