Alert

Notification banners that communicate the status of a service or an action.

Variants

Service availability

This service is in beta.

Application submitted

Your reference number is HDB-2026-04821.

Deadline approaching

You have 3 days left to confirm your details.

There is a problem

We could not save your changes.

Show code

<DsmuAlert variant="info" title="Service availability">
  This service is in beta.
</DsmuAlert>
<DsmuAlert variant="success" title="Application submitted">
  Your reference number is HDB-2026-04821.
</DsmuAlert>
<DsmuAlert variant="warning" title="Deadline approaching">
  You have 3 days left to confirm your details.
</DsmuAlert>
<DsmuAlert variant="error" title="There is a problem">
  We could not save your changes.
</DsmuAlert>

Dismissible

There is a problem

We could not save your changes. Try again.

Show code

<DsmuAlert
  variant="error"
  title="There is a problem"
  dismissible
  @dismiss="onDismiss"
>
  We could not save your changes. Try again.
</DsmuAlert>

Accessibility

The component chooses the right ARIA live role automatically: role="alert" (assertive) for error and warning, role="status" (polite) for info and success. The dismiss button has an accessible label and is a real, keyboard-operable button.

Props & events

Prop / event	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Tone of the message.
`title`	`string`	—	Optional heading.
`dismissible`	`boolean`	`false`	Show a dismiss button.
`@dismiss`	`event`	—	Emitted when dismissed.