Overlays

Dialog

A modal for confirmations and short tasks.

import { DialogContent, DialogTitle, DialogDescription, DialogFooter } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Confirm a destructive action

Show code

dialog/confirm.tsx

'use client';

import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from '@jsonresume/ui';

export default function DialogConfirm() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="danger">Delete resume</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Delete your resume?</DialogTitle>
        <DialogDescription>
          Your gist stays on GitHub. This only removes the registry copy and its
          cached renders.
        </DialogDescription>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost">Cancel</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button variant="primary">Delete</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

A short formKeep dialog forms to one or two fields.

Show code

dialog/form.tsx

'use client';

import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
  Field,
  Input,
} from '@jsonresume/ui';

export default function DialogForm() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="primary">Connect GitHub</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Connect your GitHub account</DialogTitle>
        <DialogDescription>
          We read a public gist named resume.json. We never write to your
          account.
        </DialogDescription>
        <Field label="GitHub username" hint="Case doesn't matter.">
          <Input autoComplete="username" placeholder="thomasdavis" />
        </Field>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost">Cancel</Button>
          </DialogClose>
          <Button variant="primary">Connect</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Usage

Do

Title the dialog with the question being asked.
Name buttons after their result.

Don’t

Open a dialog on page load.
Nest dialogs.

Accessibility

Focus moves into the dialog and is trapped there; Escape closes it and returns focus.
Title and description are wired to aria-labelledby and aria-describedby.

Props

Also accepts the attributes of the element DialogContent renders.
Prop	Type	Default	Description
closeLabel	string	Close	Accessible label of the close button.

No props of its own; accepts the attributes of the element it renders.

No props of its own; accepts the attributes of the element it renders.

No props of its own; accepts the attributes of the element it renders.