Feedback

Alert

Inline callouts, or a bar flush across a pane's top. Subtle tint + hairline, icon carries the tone. Warnings and errors announce themselves.

Live example

Import

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

tsx

import { Alert } from "@nibapp/ui/components/alert";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.

Alert

Inline callout for page- or panel-level messages; `layout="bar"` lays it flush across the top of a pane. Warnings and errors use `role="alert"` so they're announced when they appear; the rest are polite `status` regions.

Prop	Type	Default	Description
tone	"neutral" \| "info" \| "success" \| "warning" \| "danger"	"neutral"
layout	"callout" \| "bar"	"callout"
title	ReactNode	—
icon	ReactNode \| false	—	Replace the tone icon, or pass `false` to hide it.
action	ReactNode	—	Trailing controls, e.g. a small "Retry" button.
onDismiss	() => void	—	Renders a close button; the parent decides what dismissal means.
dismissLabel	string	—

Also takes the props of a <div> element, except title.

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 .