API reference
Component dialog uses the styled <tng-dialog> wrapper and sits on top of the same primitive contract documented on the separate headless dialog page.
Wrapper APIs
| Element | Input / Output | Type | Description |
|---|---|---|---|
<tng-dialog> | open, openChange | boolean | Controlled open state for wrapper dialog instances. |
<tng-dialog> | title, description | string | Accessible heading and description text rendered in the wrapper header. |
<tng-dialog> | size | 'sm' | 'md' | 'lg' | Panel size styling hook. |
<tng-dialog> | closeOnEscape, closeOnBackdrop | boolean | Dismiss policy for keyboard and backdrop interactions. |
<tng-dialog> | closed | 'escape' | 'backdrop' | 'close-button' | 'programmatic' | Close reason payload for analytics and custom workflows. |
Primitive directives
| Directive | Purpose | Key inputs |
|---|---|---|
tngDialog | Root modal state, focus trap, and dismissal logic. | open, defaultOpen, trapFocus, restoreFocus |
tngDialogBackdrop, tngDialogPanel | Backdrop dismissal target and panel semantics/ARIA wiring. | closeOnBackdropClick, ariaLabel* |
tngDialogTrigger, tngDialogClose | Open and close controls with reason emission. | [tngDialogTrigger], [tngDialogClose] |
tngDialogTitle, tngDialogDescription, tngDialogActions | Structured slots and IDs for accessible dialog labeling. | - |
Keyboard contract (high level)
Tab/Shift+Tabwraps within dialog focusables when trapping is enabled.Escapecloses whencloseOnEscapeanddismissibleare true.- Focus restores to the prior active element when
restoreFocusis enabled. - Backdrop pointer down closes only when target is the backdrop host.