Overlays

Alert Dialog

Interrupts for decisions: no corner close, explicit confirm/cancel, async confirm keeps the dialog open with a loading button.

Live example

Import

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

tsx

import { AlertDialog } from "@nibapp/ui/components/alert-dialog";import { Button } from "@nibapp/ui/components/button";

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.

AlertDialog

Confirm/cancel convenience: `<AlertDialog trigger={…} title="Discard changes?" destructive onConfirm={…}/>`.

Prop	Type	Default	Description
trigger	ReactElement	—	Optional trigger element; must accept a ref and DOM props (e.g. <Button>).
title (required)	ReactNode	—
description	ReactNode	—
children	ReactNode	—	Extra content between the description and the actions (e.g. a "don't ask again" checkbox).
icon	ReactNode	—	Leading glyph shown above the title.
confirmLabel	ReactNode	—
cancelLabel	ReactNode	—
destructive	boolean	false	Danger styling for irreversible actions.
onConfirm	() => void \| Promise<void>	—	Runs on confirm. Return a promise to keep the dialog open with a loading confirm button until it settles; the dialog closes on success and stays open if it rejects.
onCancel	() => void	—
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—
size	DialogPopupVariants["size"]	—

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 .