Properties
| Name | Type | Default | Description |
|---|
open | boolean | false | Whether the flyout is currently open. Controlled prop — the consumer must set this to false in response to the dismiss event. |
position | 'start' | 'end' | 'end' | Which edge of the viewport the panel slides in from. 'start' = left, 'end' = right. |
heading | string | '' | Heading text displayed in the flyout header. Also used as the accessible label (aria-label) on the dialog panel. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. Sets data-theme on the host so design token overrides cascade into the shadow DOM. |
Events
| Name | Detail type | Bubbles | Description |
|---|
dismiss | void | No | Emitted when the user requests the flyout to close — by clicking the backdrop, pressing Escape, or clicking the dismiss (×) button. The consumer must set open={false} in response. Not bubbles, not composed. |
When using in React (JSX), listen via ondismiss (lowercase) because React 19 maps onXxx → addEventListener('Xxx', ...) without lowercasing.
Slots
| Slot | Description |
|---|
default | Scrollable body content of the flyout. Fills the space between the header and footer. |
header | Extra content placed inside the header row, after the heading text and before the dismiss button. |
footer | Sticky footer content (e.g. action buttons). The footer area is automatically hidden via .footer:empty { display: none } when nothing is slotted here. |
CSS Custom Properties
| Property | Default | Description |
|---|
--diwa-flyout-width | 480px | Width of the sliding panel. Clamped between a minimum of 320px and a maximum of 100vw. |