Dialog

Dialog

Examples

Default

A trigger, a titled panel, and a footer whose actions close it. Escape closes it too.

Usage

Import

import { Dialog } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/dialog.

Variant props

Prop	Values
`size`	`sm` · `default` · `lg` · `xl` · `full`

Controlled and uncontrolled

Pass the value prop to control it, or the default prop to let the component own it.

Value	Default	Change
`open`	`defaultOpen`	`onOpenChange`

States

open

Support

Feature	Status
Right-to-left	Supported
Dark mode	Supported
Density	Not supported
Server rendering	Client component
Reduced motion	Supported

Accessibility

Follows the WAI-ARIA dialog pattern. Partly audited.

Check	Result
Semantics	Pass
Accessible name	Pass
Keyboard	Pass
Focus	Partial
Screen reader	Pass
Right-to-left	Not applicable
Reduced motion	Pass
Forced colours	Pass
Contrast	Pass

Keyboard

Tab Shift+tab Escape

Focus

Each control is a Tab stop, in order. While open, focus is contained and focus returns on close.

Known limitations

Focus: Focus containment is enforced with inert, which jsdom does not implement, so the tests assert the mechanism is installed rather than observing containment. Browser-level verification is on the manual checklist.

Tests

Covered by unit, accessibility (axe), interaction and visual tests.

ExamplesCopy Anchor Link

DefaultCopy Anchor Link

UsageCopy Anchor Link

ImportCopy Anchor Link

Variant propsCopy Anchor Link

Controlled and uncontrolledCopy Anchor Link

StatesCopy Anchor Link

SupportCopy Anchor Link

AccessibilityCopy Anchor Link

KeyboardCopy Anchor Link

FocusCopy Anchor Link

Known limitationsCopy Anchor Link

TestsCopy Anchor Link

On this page