Dialog

An overlay with a centred panel. Open it here to see it above this page; it closes from the backdrop, the × or the footer button.

Controls

openboolean

titlestring

childrenstring

Code

import { Dialog } from "@/components/ui/kit/feedback";

<Dialog
  open={false}
  onClose={close}
  title="Dialog"
>
  The dialog’s content goes here.
</Dialog>

Every state

Usage

Use a dialog only for a decision that has to be made before going on.
Name the button after the outcome: “Delete draft”, not “OK”.

Don’t

Don’t open a dialog as the page loads, or one on top of another.

Tokens it uses

Tokens it uses
--surface	…
--line	…
--line-2	…
--ink	…
--ink-2	…
--faint	…
--font-display	…
--font-body	…

Values are read live from the stylesheet, so they follow the site theme.