Props

Property	Type	Default	Description
status	'info' | 'success' | 'warning' | 'error'	—	Required. Message status.
title	string	—	Required. Message title.
description	string	—	Supporting text below the title.
icon	Component	—	Custom decorative icon.
isDismissable	boolean	false	Shows the dismiss button. Dismissal hides the component.
dismissLabel	string	Dismiss {title}	Accessible name for the dismiss button.
container	'card' | 'section'	card	card has rounded corners. section has square corners.
elevation	'none' | 'low' | 'med' | 'high'	none	Shadow depth for the whole banner.
collapsible	boolean	true	Whether detail content can collapse.
defaultIsOpen	boolean	false	Initial expansion when isOpen is not bound.
v-model:isOpen	boolean	—	Controls expansion from the parent.
expandLabel	string	Expand details	Accessible name for the expand button.
collapseLabel	string	Collapse details	Accessible name for the collapse button.

Slots

• Default: details below the header.
• title: replaces the visible title. The title prop remains required.
• description: replaces the supporting text.
• icon: replaces the decorative status icon.
• end: action buttons at the end of the header.

Title, description and detail slots accept block content.

Expanding and collapsing

• Detail content enables the expand button.
• Details start collapsed by default.
• defaultIsOpen sets the initial state only.
• v-model:isOpen controls the current state.
• collapsible set to false keeps details visible.
• Collapsing unmounts the details.
• If a parent closes focused details, focus returns to the expand button.

<Banner v-model:is-open="open" status="info" title="Configuration changes">
  <p>Review the updated settings before continuing.</p>
</Banner>

Dismissal

• isDismissable shows a dismiss button.
• Clicking it hides the component.
• The component emits dismiss.
• Dismissal tries to restore focus to the element used before entering the banner.
• Remount the component or change its key to show it again.

Events and template references

• update:isOpen(value): requests an expansion change.
• dismiss(): dismisses the banner.
• element: the root HTMLDivElement | null. It becomes null after dismissal.

Localization

Provide translated control labels:

• dismissLabel: dismiss button.
• expandLabel: expand button.
• collapseLabel: collapse button.

Theme

.my-banner {
  --astryx-banner-info-background: #ecfdf5;
  --astryx-banner-info-foreground: #065f46;
}

• --astryx-banner-info-background: information background.
• --astryx-banner-info-foreground: information text and icon.
• --astryx-banner-success-background: success background.
• --astryx-banner-success-foreground: success text and icon.
• --astryx-banner-warning-background: warning background.
• --astryx-banner-warning-foreground: warning text and icon.
• --astryx-banner-error-background: error background.
• --astryx-banner-error-foreground: error text and icon.
• --astryx-banner-content-background: detail background.
• --astryx-banner-border: detail border.
• --astryx-radius-container: card corner radius.

Neutral follows the active light or dark mode.