A modal dialog primitive with managed focus and accessible labeling.
Dialog defines how EnterUI handles a modal dialog primitive with managed focus and accessible labeling, including default structure, accessible states, and token-driven styling.
Dialog uses Radix focus management with EnterUI surfaces.
<Dialog>
<DialogTrigger asChild><Button>Open dialog</Button></DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create workspace</DialogTitle>
<DialogDescription>Set up a focused space for a product team.</DialogDescription>
</DialogHeader>
<FormField label="Workspace name" labelProps={{ htmlFor: "dialog-workspace" }}>
<Input id="dialog-workspace" placeholder="Design system" />
</FormField>
<DialogFooter>
<Button variant="secondary">Cancel</Button>
<Button>Create</Button>
</DialogFooter>
</DialogContent>
</Dialog>import {
Button,
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
FormField,
Input,
} from "@froggdesign/enter-ui-react";Dialog content is rendered in a portal. Focus is trapped while open and returns to the trigger when closed. Use DialogTitle and DialogDescription for accessible labeling.
Dialog accepts Radix root props.DialogContent supports className and showOverlay.DialogHeader and DialogFooter are layout helpers.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.