Component reference
DialogActions
The row of buttons that ends a dialog; it stacks whole when it does not fit, like ActionRow.
Preview
DialogActions has no story of its own; this one draws it as part of Dialog.
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.
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
Taken from the examples on this page.
import { DialogActions } from "meowtail";
<DialogActions>
<Button variant="quiet">
Cancel
</Button>
<Button type="submit" value="save">
Save description
</Button>
</DialogActions>Examples
Other stories that draw DialogActions.
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.
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>
)Attachments, sources and execution states
Images are recognized by thumbnail and files show name and size; detailed process and sources expand on demand.
render: () => (
<div className="workshop-composition">
<ChatAttachments
items={[
{
id: "image",
name: "layout-sketch.svg",
mediaType: "image/svg+xml",
url:
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180" viewBox="0 0 320 180"><defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#eef2ff"/><stop offset="1" stop-color="#fdf2f8"/></linearGradient></defs><rect width="320" height="180" fill="url(#bg)"/><rect x="20" y="20" width="280" height="172" rx="12" fill="#ffffff" stroke="#e4e4e7"/><circle cx="34" cy="34" r="3.5" fill="#fca5a5"/><circle cx="46" cy="34" r="3.5" fill="#fcd34d"/><circle cx="58" cy="34" r="3.5" fill="#86efac"/><rect x="36" y="56" width="62" height="8" rx="4" fill="#e4e4e7"/><rect x="36" y="72" width="46" height="8" rx="4" fill="#f4f4f5"/><rect x="36" y="88" width="53" height="8" rx="4" fill="#f4f4f5"/><rect x="114" y="52" width="170" height="61" rx="8" fill="#6366f1" fill-opacity="0.14"/><rect x="114" y="125" width="136" height="8" rx="4" fill="#e4e4e7"/><rect x="114" y="141" width="94" height="8" rx="4" fill="#f4f4f5"/></svg>',
),
},
{
id: "file",
name: "component-design-language-and-interaction-states.md",
mediaType: "text/markdown",
sizeBytes: 2468,
url: "data:text/plain,MeowUI%20design%20sample",
onPreview: () =>
(document.getElementById("attachment-preview") as HTMLDialogElement).showModal(),
},
]}
/>
<Dialog
id="attachment-preview"
labelledBy="attachment-title"
describedBy="attachment-description"
>
<DialogPanel
header={
<DialogHeader
title="component-design-language-and-interaction-states.md"
titleId="attachment-title"
description="Built-in Markdown example · No local file was read"
descriptionId="attachment-description"
/>
}
>
<article className="workshop-document">
<h3>Keep content in the foreground</h3>
<p>Components own semantics and actions; themes organize size, color and feedback.</p>
<p>When changing scheme, work in progress stays in place.</p>
</article>
<DialogActions>
<Button data-close-preview>Back to attachments</Button>
</DialogActions>
</DialogPanel>
</Dialog>
<ChatToolCall
icon={<Icon name="file-text" />}
label="Check component states"
state="running"
detail="This is a fixed-state example; no background task runs."
/>
<ChatToolCall
icon={<Icon name="file-text" />}
label="Waiting to confirm the change scope"
state="waiting"
collapsible
>
<p>The component contract stays stable, and themes can evolve independently.</p>
</ChatToolCall>
<ChatToolCall
icon={<Icon name="network" />}
label="Example connection lost"
state="error"
detail="Input is kept; retry once the connection returns."
/>
<ChatSources
items={[
{
title: "Apple Human Interface Guidelines",
url: "https://developer.apple.com/design/human-interface-guidelines/typography",
description:
"Desktop type role reference; the Web parameters are this project's adaptation.",
},
]}
/>
</div>
)API reference
Props
Also takes className, children and the attributes and events of its root element.
DOM parts
root
Registry
The component is registered as dialog-actions in the meowtail component registry.