Component reference

Dialog

The native dialog element, themed; Modal builds a complete dialog on top of it.

Preview

Editing and long content

Submits and returns through native form method=dialog. Long content stays readable in the dialog, and the title, description, close, and save each have their role.

packages/meowtail/stories/dialog-form.stories.tsxline 33tsx

render: () => (
  <div className="workshop-stack workshop-constrained">
    <Button data-edit-open>Edit delivery notes</Button>
    <Note role="status" data-edit-feedback>
      The local sample has not been modified yet.
    </Note>
    <Dialog labelledBy="edit-title" describedBy="edit-description">
      <DialogPanel
        as="form"
        method="dialog"
        header={
          <DialogHeader
            eyebrow="Pre-delivery check"
            title="Write a verifiable description for this component design and interaction improvement"
            titleId="edit-title"
            description="Built-in sample; saving only closes the dialog and shows a local receipt."
            descriptionId="edit-description"
            actions={
              <IconButton label="Close editing" data-edit-close>
                <Icon name="x" />
              </IconButton>
            }
          />
        }
      >
        <Field label="Description title" htmlFor="edit-name">
          <Input
            id="edit-name"
            name="title"
            value="Calibrate component proportions and theme boundaries"
            required
            autofocus
          />
        </Field>
        <section className="workshop-document" aria-label="Sample delivery notes">
          {[
            "Delivery content: This sample includes buttons, inputs, and a confirmation dialog, with two themes and light and dark appearances for each.",
            "Review scope: Check long titles, form hints, and action positions on desktop and narrow screens, and record any issues found while using the keyboard.",
            "Current limitations: No project service is connected here; saving only updates the receipt on this page, and this note is not kept after the page is refreshed.",
            "Follow-up work: Adopt the confirmed components in real pages, then verify loading, failure, and recovery. Unfinished checks should stay in the delivery record.",
          ].map((copy) => (
            <p>{copy}</p>
          ))}
        </section>
        <DialogActions>
          <Button variant="quiet" data-edit-close>
            Cancel
          </Button>
          <Button type="submit" value="save">
            Save description
          </Button>
        </DialogActions>
      </DialogPanel>
    </Dialog>
  </div>
)

Installation

bun add meowtail

Usage

usage.tsts

import { Dialog } from "meowtail";

Examples

The other stories that show this component.

Keyboard and focus return

Uses a real dialog.showModal. Focus moves into the dialog when it opens, Escape or cancel closes it, and focus returns to the open button.

packages/meowtail/stories/foundation.stories.tsxline 474tsx

render: () => (
  <div className="workshop-stack workshop-constrained">
    <Section
      title="One confirmation before finishing"
      description="Use Escape or cancel to return; the dangerous action keeps explicit text."
    />
    <Button data-open-dialog>Open confirmation dialog</Button>
    <Note data-feedback role="status">
      The current work is still in progress.
    </Note>
    <Dialog labelledBy="workshop-dialog-title" describedBy="workshop-dialog-description">
      <DialogPanel
        header={
          <DialogHeader
            title="End the current work?"
            titleId="workshop-dialog-title"
            description="This is a local demo and does not affect real tasks. You can cancel and keep reviewing components."
            descriptionId="workshop-dialog-description"
          />
        }
      >
        <DialogActions>
          <Button variant="quiet" data-close-dialog="cancel" autofocus>
            Cancel
          </Button>
          <Button variant="danger" data-close-dialog="confirm">
            End work
          </Button>
        </DialogActions>
      </DialogPanel>
    </Dialog>
  </div>
)

API reference

Props

Prop	Type	Default
`labelledBy`	`string`	–
`describedBy`	`string`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as dialog in the meowtail component registry.