Dialog

1.1.1

Accessible modal dialog with trigger, overlay, header, description, and footer composed on Base UI.

npx jabkit add dialog

Component Data

ID: dialog
Category: atoms
Version: 1.1.1
Added: 2026-08-30
Type: component
Keyboard nav: Yes
Reduced motion: Yes

dialogmodaloverlayprimitiveaccessible

Dependencies

@base-ui/react
lucide-react
clsx
tailwind-merge
react

Examples

Default

<Dialog>
      <DialogTrigger render={<Button>{dialogMocks.default.trigger}</Button>} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{dialogMocks.default.title}</DialogTitle>
          <DialogDescription>
            {dialogMocks.default.description}
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose
            render={
              <Button variant="secondary">{dialogMocks.default.cancel}</Button>
            }
          />
          <Button>{dialogMocks.default.confirm}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

Variants

<Dialog>
      <DialogTrigger
        render={
          <Button variant="destructive">{dialogMocks.confirm.trigger}</Button>
        }
      />
      <DialogContent showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>{dialogMocks.confirm.title}</DialogTitle>
          <DialogDescription>
            {dialogMocks.confirm.description}
          </DialogDescription>
        </DialogHeader>
        <DialogFooter showCloseButton>
          <DialogClose
            render={
              <Button variant="secondary">{dialogMocks.confirm.cancel}</Button>
            }
          />
          <Button variant="destructive">{dialogMocks.confirm.confirm}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>