Dialog
A window overlaid on either the primary window or another dialog window.
Usage
Features
- Keyboard navigation with Escape key to close
- Click outside to close (configurable)
- Focus trap for accessibility
- Smooth animations and transitions
- ARIA attributes for screen readers
API Reference
VoltDialogContent — [voltDialogContent]
| Input | Type | Default |
|---|---|---|
| class | string | '' |
| role | unknown | — |
| modal | unknown | — |
VoltDialogDescription — [voltDialogDescription]
| Input | Type | Default |
|---|---|---|
| class | string | '' |
VoltDialogOverlay — [voltDialogOverlay]
| Input | Type | Default |
|---|---|---|
| class | string | '' |
| closeOnClick | unknown | — |
VoltDialogRoot — ng-template[voltDialogRoot]
| Input | Type | Default |
|---|---|---|
| open | boolean | false |
| role | VoltDialogRole | 'dialog' |
| closeOnEscape | boolean | true |
| closeOnClick | boolean | true |
| Output | Type |
|---|---|
| openChange | boolean |
| closed | R | undefined |
VoltDialogTitle — [voltDialogTitle]
| Input | Type | Default |
|---|---|---|
| class | string | '' |
VoltDialog — [voltDialog]
| Input | Type | Default |
|---|---|---|
| voltDialog | unknown | — |
| closeOnEscape | unknown | — |
| Output | Type |
|---|---|
| closed | unknown |
Component Source
Install via CLI:
npx @voltui/cli add dialogTypeScript
Loading editor…
Copy this code to your project. The component uses ng-primitives/dialog.