Overlays

Dialog

Modal surface with a soft blurred scrim and spring entrance. Four widths: sm, md, lg, xl.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { Button } from "@nibapp/ui/components/button";import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "@nibapp/ui/components/dialog";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Button

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "quiet" \| "danger" \| "danger-ghost" \| "link"	"secondary"	primary Neutral ink: the main call to action. Actions are ink, never the accent. secondary Quiet surface with a hairline — the default for most actions. ghost No chrome until hovered — toolbars, inline actions. quiet Words that are also an action, in the text's own weight and laid out from the start, so they line up with the text around them: `xs` in a line (a header's crumbs, a title that renames), `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link). danger Destructive confirmation. danger-ghost Destructive but low emphasis. link Inline text action.
size	"xs" \| "sm" \| "md" \| "lg"	"md"
block	boolean	—
truncate	boolean	—	The button may shrink below its label's width; the label then truncates with an ellipsis.
wrap	boolean	—	The label wraps onto more lines and the button grows, its `leading` icon on the first line: for words that are an action and may run long in another language (a tip). One line keeps the size.
loading	boolean	false	Shows a spinner, keeps the button's width, and blocks interaction.
leading	ReactNode	—	Icon rendered before the label.
trailing	ReactNode	—	Icon or hint (e.g. <Kbd>) rendered after the label.
disabledReason	string \| undefined	—	Disables the button and says why: the reason is its tooltip and its accessible description, and the button stays focusable (`aria-disabled`) so a keyboard reaches it.

Also takes .

Dialog

Convenience wrapper with a standard header/body/footer layout.

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl" \| "window"	"md"	window A page of its own in a dialog (Settings): wide, and as tall as the window allows up to 760 px.
trigger	ReactElement	—	Optional trigger element; must accept a ref and DOM props (e.g. <Button>).
title (required)	ReactNode	—
description	ReactNode	—
children	ReactNode	—	Body content.
footer	ReactNode	—	Footer actions (buttons). Wrap a cancel button in `<DialogClose render={<Button/>}/>`.
open	boolean	—
defaultOpen	boolean	—
onOpenChange	ComponentProps<typeof BaseDialog.Root>["onOpenChange"]	—
closable	boolean	—
className	string	—

DialogBody

Also takes the props of a <div> element.

DialogContent

Portal + backdrop + viewport + popup.

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl" \| "window"	"md"	window A page of its own in a dialog (Settings): wide, and as tall as the window allows up to 760 px.
closable	boolean	true	Render the corner close button.
viewportClassName	string	—	Extra classes for the centering viewport (e.g. vertical alignment).

Also takes .

DialogDescription

Also takes the props of Base UI's Dialog.Description.

DialogFooter

Also takes the props of a <div> element.

DialogHeader

Also takes the props of a <div> element.

DialogTitle

Also takes the props of Base UI's Dialog.Title.