Get Started
OverlaysUpdated May 3, 2026

Dialog

A modal dialog primitive with managed focus and accessible labeling.

#Default usage

Default dialogDialog uses Radix focus management with EnterUI surfaces.

#Usage

Code
import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  FormField,
  Input,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <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>
  );
}

#Accessibility

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.

#API

  • Dialog accepts Radix root props.
  • DialogContent supports className and showOverlay.
  • DialogHeader and DialogFooter are layout helpers.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page