Modal
Accessible dialog overlay with focus trap, ESC to close, backdrop dismiss, and flexible header/footer slots.
API
All inputs and configuration options for zyra-modal.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Two-way bound visibility state via [(open)] |
title | string | '' | Dialog heading displayed in the header |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Maximum width of the dialog panel |
dismissible | boolean | true | Shows a close × button and allows ESC / backdrop click to close |
closed (output) | void | - | Emits after the modal finishes closing |
Tokens
CSS custom properties zyra-modal reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Backdrop--zyra-color-overlay-scrim | var(--zyra-color-overlay-bg) | Fill color of the scrim behind the dialog. |
Panel background--zyra-color-surface | var(--zyra-color-card-bg) | Fill color of the dialog panel. |
Border--zyra-color-border-color | var(--zyra-color-border) | Border color of the panel, header divider, and footer divider. |
Title text--zyra-color-foreground | var(--zyra-color-text) | Color of the dialog title, and of the close button on hover. |
Close button--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of the close × button in its resting state. |
Focus ring--zyra-ring | var(--zyra-focus-ring) | Outline color when the close button is keyboard-focused. |
Panel shadow--zyra-modal-shadow | var(--zyra-shadow-md) | Drop shadow behind the dialog panel — its own token, not borrowed from Card. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="dialog" and aria-modal="true" to isolate screen-reader focus
- Focus is trapped inside the modal while it is open
- ESC key closes the modal; focus returns to the trigger element on close
- aria-labelledby links the title to the dialog for screen reader announcement