Dialog

Focuses attention on a modal task. Title, body, and two equal actions.

Preview

In action

Pull

Remove a sheet from the run. The question sits on paper.

When to use

Use it for

A short decision or a form that must finish before the page continues.
One title, one sentence of body, two equal actions.

Not for

Content the user should keep the page in view for; use Sheet or Popover.
Destructive confirmations that must not dismiss on Escape; use AlertDialog.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Button, Dialog, DialogActions, DialogBody, DialogTitle } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/dialog.

2. Vendor the source

npx @noorddev/vlak-cli add dialog

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/dialog.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { Button, Dialog, DialogActions, DialogBody, DialogTitle } from "@noorddev/vlak-react";

const [open, setOpen] = useState(false);

<Button variant="ghost" onClick={() => setOpen(true)}>Remove</Button>
<Dialog open={open} onClose={() => setOpen(false)} closeLabel="Close">
  <DialogTitle>Remove this item?</DialogTitle>
  <DialogBody>This can't be undone.</DialogBody>
  <DialogActions>
    <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>Cancel</Button>
    <Button size="sm" onClick={remove}>Remove</Button>
  </DialogActions>
</Dialog>

Props

Dialog

A native <dialog>. Focus trapping, Escape, and the backdrop come from the platform; the title names it and the body describes it.

Prop	Type	Description
`open`required	`boolean`
`onClose`	`() => void`
`dismissable`	`boolean`	Escape (and any other platform close request) asks the parent to close. Off, the dialog must be answered; maps to closedby="none".
`lightDismiss`	`boolean`	A click on the backdrop closes too; maps to closedby="any".
`closeLabel`	`string`	Renders a labelled close button in the top corner.
`extraStyles`	`Leaves`	Extra StyleX leaves merged after the dialog frame (command palette).

Also accepts Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose">.

DialogActions

Also accepts HTMLAttributes<HTMLDivElement>.

DialogBody

Also accepts HTMLAttributes<HTMLParagraphElement>.

DialogTitle

Prop	Type	Default	Description
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "div"`	`"h2"`	Heading level. The dialog is named by this element either way.

Also accepts HTMLAttributes<HTMLHeadingElement>.

Keyboard

Keys	Does
`Escape`	Calls onClose (when dismissable, the default)
`Tab, Shift + Tab`	Cycles focus inside the open dialog
`Enter, Space`	Activates the focused action

Accessibility

A native <dialog> opened with showModal(): the platform traps focus, provides the backdrop, and handles Escape.
DialogTitle (an h2 by default) names it through aria-labelledby; DialogBody describes it through aria-describedby, only while mounted.
On open, focus moves to [autofocus] or the first focusable element; on close it returns to the element that opened it.
dismissable={false} maps to closedby="none"; lightDismiss adds a click on the backdrop. closeLabel renders a labelled close button. The ref is forwarded to the <dialog>.

Markup

<div class="rs-dialog" role="dialog" aria-labelledby="remove-title" aria-describedby="remove-body"><h2 class="rs-dialog-title" id="remove-title">Remove this item?</h2><p class="rs-dialog-body" id="remove-body">This can't be undone.</p><div class="rs-dialog-actions"><button class="rs-btn-ghost rs-btn-sm">Cancel</button><button class="rs-btn-primary rs-btn-sm">Remove</button></div></div>

Classes

.rs-dialog.rs-dialog-title.rs-dialog-body.rs-dialog-actions.rs-dialog-close

Depends on

/button