Banner
A floating top-of-viewport notification for global, non-blocking feedback. Supports semantic states, optional action, dismiss behavior, and timed or persistent visibility.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls visibility state for slide in/out behavior. |
state | 'info' | 'success' | 'warning' | 'error' | 'info' | Semantic state controlling icon, colors, and live-region urgency. |
heading | string | '' | Optional heading displayed before description. |
description | string | '' | Description text. Falls back to default slot when empty. |
persistent | boolean | false | When true, disables auto-dismiss regardless of duration value. |
duration | number | 6000 | Auto-dismiss delay in ms when persistent is false. Set 0 to disable timer. |
dismissButton | boolean | true | Shows or hides dismiss control. |
actionLabel | string | undefined | Optional action button label. |
actionLoading | boolean | false | Renders loading state for action control. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. |
Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
dismiss | void | No | Emitted when user dismisses, auto-dismiss timer fires, or hide() is called. |
action | void | No | Emitted when action button is activated. |
Methods
| Name | Signature | Description |
|---|---|---|
show | () => Promise<void> | Programmatically opens the banner and starts timer when applicable. |
hide | () => Promise<void> | Programmatically closes banner and emits dismiss. |
Slots
| Slot | Description |
|---|---|
default | Fallback content used when description is empty. |
CSS custom properties
| Name | Default | Description |
|---|---|---|
--diwa-banner-position-top | 90px | Top offset for desktop/tablet floating position. |
--diwa-banner-position-top-mobile | 64px | Top offset used under 480px viewport width. |