Banner

Overlay

Dismissible announcement bar, ideal for global messages at the top of the page.

Props

Prop	Type	Default	Description
`variant`	`"default" \| "info" \| "success" \| "warning" \| "danger"`	`"info"`	Color and icon of the banner.
`dismissible`	`boolean`	`true`	Show the close button.

Examples

Variants

System maintenance scheduled for Sunday, 2 AM UTC.

Your account has been successfully verified.

Your subscription expires in 7 days. Renew now.

Critical error detected. Please contact support.

vue

<DsBanner variant="info" :dismissible="true">
  New version 2.0 is available.
  <a href="#" class="font-semibold underline ml-1">Read the changelog.</a>
</DsBanner>

<DsBanner variant="warning" :dismissible="true">
  Your subscription expires in 3 days.
</DsBanner>

<DsBanner variant="danger" :dismissible="false">
  Critical security update required.
</DsBanner>

Skeleton

Use DsBannerSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsBannerSkeleton />

Accessibility

role="alert" to announce the message to screen readers.
The dismiss button has aria-label="Dismiss".

AlertDialog

Collapsible