Feedback

Toast

Base UI Toast on the kit's surfaces. Bottom-end, inset by --toast-inset-bottom / --toast-inset-x (or `offset`) so it clears docked chrome, on the layer under dialogs and popovers. Semantic icons (never color alone), ink actions, swipe or ✕ to dismiss, F6 to reach the stack. Hover to expand.

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 { DialogBody, DialogContent, DialogDescription, DialogHeader, DialogRoot, DialogTitle } from "@nibapp/ui/components/dialog";import { Toaster, toast } from "@nibapp/ui/components/toast";

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 .

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.

DialogHeader

Also takes the props of a <div> element.

DialogTitle

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

Toaster

Mount once near the app root. Bottom-end by default, raised surfaces, semantic icons, swipe or ✕ to dismiss, F6 to reach the stack from the keyboard; announced politely. The viewport sits on the `toast` layer, under `overlay` (dialogs, popovers), so a modal's backdrop covers the stack and its close button always stays clickable. Fire toasts with `toast(...)`.

Prop	Type	Default	Description
position	ToastPosition \| undefined	"bottom-end"	Default `bottom-end`.
offset	ToastOffset \| undefined	—	Distance from the window edges (default 16 px). Same as setting `--toast-inset-bottom` / `--toast-inset-x` in CSS; raise the bottom one to clear a docked toolbar or status bar.
duration	number \| undefined	4000	Default auto-dismiss in ms (default 4000); `toast(…, { duration })` overrides per toast.
className	string \| undefined	—