Show timely messages
Use alerts for information that affects the task or page the user is viewing.
Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
Use alerts for information that affects the task or page the user is viewing.
Choose info, success, warning, danger, or neutral to match the message.
Inline alerts sit with the content, so users can read the message and continue.
Container
Leading icon (optional)
Title (optional)
Description
Dismissible - close button (optional)
The alert offers variants to convey a different level of importance.
Use to provide general context or neutral information, such as announcements or guidance that do not indicate a status outcome, in either filled or outlined style.
The alert supports two styles, filled and outlined.
Use filled alerts when the message needs stronger visual emphasis, such as higher-priority updates or messages users should notice immediately.
The alert can be manually dismissed by the user.
Use for persistent messages that must remain visible, such as system statuses or warnings the user needs to act on.
Alerts may include an icon to reinforce meaning. The icon should support, not replace, the message text.
Use to reinforce the alert's meaning with a recognisable visual cue. The icon should support, not replace, the message text.
Alerts can include a title to summarise the message and provide hierarchy, especially for longer or more complex content.
Use when the alert contains longer or more detailed content that benefits from a clear summary heading.
The default slot can contain supplementary content such as links or supporting actions, as long as the message stays clear and scannable.
Use when the alert message is complete without extra supporting content.
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.
sgds-padding-lg20pxsgds-padding-lg20pxsgds-padding-2-xl32pxsgds-gap-sm12pxsgds-gap-2-xs4pxsgds-gap-md16pxsgds-border-width-11pxsgds-border-radius-md8pxsgds-font-size-body-sm—sgds-font-size-subtitle-sm—sgds-font-weight-regular—sgds-font-weight-semibold—sgds-line-height-2-xsHeight variessgds-outline-focus—sgds-outline-offset-focus—Use the variant that reflects the message severity so users can understand the status quickly.
Too many alerts compete with the page content. Prioritise the message users need most.
Alerts expose their message as an alert region when they are shown.
Dismissible alerts use the SGDS close button for the close action.
role="alert" and updates aria-hidden based on its shown state.This component does not have a separate keyboard interaction table because:
Share them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/alert
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.