Dialog

Stop and decide. A modal over a Steel Grey veil — Esc or the × closes it.

Preview

Usage

tsx

import {
  Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle,
  DialogDescription, DialogFooter, DialogClose, Button,
} from "zostel-ui";

<Dialog>
  <DialogTrigger asChild><Button>Edit profile</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Your profile</DialogTitle>
      <DialogDescription>The name other travellers see.</DialogDescription>
    </DialogHeader>
    …
    <DialogFooter>
      <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Dialog

Prop	Type	Default	Description
`open / defaultOpen`	`boolean`	—	Controlled / uncontrolled.
`onOpenChange`	`(open: boolean) => void`	—	Called when it opens or closes.
`modal`	`boolean`	`true`	Locks the page behind.

open / defaultOpen

Type: boolean

Default: —

Controlled / uncontrolled.

onOpenChange

Type: (open: boolean) => void

Default: —

Called when it opens or closes.

modal

Type: boolean

Default: true

Locks the page behind.

Parts

Prop	Type	Default	Description
`DialogTrigger`	`button`	—	Opens it (asChild to use your own Button).
`DialogContent`	`div`	—	The panel: white, a 1 px edge, no shadow, over a Steel Grey veil at 40 %. layout: "center" (the default, a card on every screen) · "sheet" (rises from the bottom on a phone, a card from sm) · "full" (the whole screen on a phone, a card from sm). close={false} when the panel draws its own close; container mounts it inside another element (one that is full screen).
`DialogCloseButton`	`button`	—	The one close control: a round Beige button with the UI cross, 44 px on a phone. label names it (default "Close").
`DialogHandle`	`div`	—	The grab handle at the top of a sheet that rises from the bottom (phones).
`DialogHeader / DialogFooter`	`div`	—	Title area / action row.
`DialogTitle / DialogDescription`	`h2 / p`	—	Read out by screen readers — always give a title.
`DialogClose`	`button`	—	Closes it (asChild to make any Button close it).

DialogTrigger

Type: button

Default: —

Opens it (asChild to use your own Button).

DialogContent

Type: div

Default: —

The panel: white, a 1 px edge, no shadow, over a Steel Grey veil at 40 %. layout: "center" (the default, a card on every screen) · "sheet" (rises from the bottom on a phone, a card from sm) · "full" (the whole screen on a phone, a card from sm). close={false} when the panel draws its own close; container mounts it inside another element (one that is full screen).

DialogCloseButton

Type: button

Default: —

The one close control: a round Beige button with the UI cross, 44 px on a phone. label names it (default "Close").

DialogHandle

Type: div

Default: —

The grab handle at the top of a sheet that rises from the bottom (phones).

DialogHeader / DialogFooter

Type: div

Default: —

Title area / action row.

DialogTitle / DialogDescription

Type: h2 / p

Default: —

Read out by screen readers — always give a title.

DialogClose

Type: button

Default: —

Closes it (asChild to make any Button close it).

Accessibility

Esc closes it, focus returns to the trigger, and the page behind is locked while it is open (Radix).