Flyout
A full-height overlay panel that slides in from the edge of the viewport. Follows the controlled component pattern — the consumer manages open state and responds to the dismiss event.
End (default)
By default the panel slides in from the right edge. Click the button to open it, then click the backdrop, dismiss button, or press Escape to close.
<diwa-button theme="dark">Open Flyout</diwa-button>
<diwa-flyout heading="Product details" position="end" theme="dark">Use this panel to display supplementary information without navigating away from the current page.</diwa-flyout>Start position
Setting position="start" slides the panel in from the left edge. Useful for navigation drawers or filter panels.
<diwa-button theme="dark">Open Menu</diwa-button>
<diwa-flyout heading="Navigation" position="start" theme="dark">Setting position="start" slides the panel in from the left edge, suitable for navigation drawers.</diwa-flyout>With footer slot
Place action buttons in the footer slot to keep them always visible above the fold, regardless of body content length.
<diwa-button theme="dark">Open Flyout</diwa-button>
<diwa-flyout heading="Confirm action" position="end" theme="dark">
Place action buttons in the footer slot to keep them persistently visible regardless of how much content is in the body.
<div slot="footer" style='{"display":"flex","gap":"12px","justifyContent":"flex-end"}'>
<diwa-button variant="secondary" theme="dark">Cancel</diwa-button>
<diwa-button theme="dark">Confirm</diwa-button>
</div>
</diwa-flyout>Form inside flyout
A common pattern — inline editing without a full page navigation. The footer holds the primary and secondary actions.