Alert

Use a GdsAlert to surface an inline message that follows a user action - a confirmation, a warning before something irreversible, an error after a failed request. Alerts live alongside content (unlike snackbars or toasts which appear at the screen edge and disappear).

Pick the right severity for what you’re communicating:

When not to use it

• Long-running validation feedback inline with a field → use helperText on GdsTextField instead.
• A transient confirmation that should dismiss itself → use a snackbar / toast (coming as GdsSnackbar), not an Alert.
• A modal interruption requiring a decision → use a dialog. Alerts are inline, not blocking.

Accessibility

GdsAlert renders with role="alert", so assistive tech announces it as soon as it appears in the DOM. That’s powerful - and easy to abuse. A page that fires an alert every render trains screen reader users to tune them out. Reserve alerts for content that genuinely deserves immediate attention.

If you mount an alert lazily (e.g. after a form submission), make sure the message is meaningful on its own - screen readers read the alert text out of context, with no surrounding prose.

Severity

Pick info, success, warning, or error. Each one has its own color and icon.

Variants

Choose how strong the alert looks.

• standard (default) - light background. Good for most inline messages.
• filled - solid color. Use for important notices.
• outlined - border only. Use when you want less emphasis.

With a title

Add a bold title above the message when the alert needs a short heading.

Close button

Pass onClose to show a close button so users can hide the alert.

Custom action

Use the action prop to add your own button, like Retry. This replaces the default close button.

Props