Overlays

Sheet

Floating panels that spring in from any edge and follow your finger — swipe toward their edge to dismiss.

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 { Sheet, SheetClose } from "@nibapp/ui/components/sheet";

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 .

Sheet

Convenience wrapper with header/body/footer layout.

Prop	Type	Default	Description
trigger	ReactElement	—	Optional trigger element; must accept a ref and DOM props (e.g. <Button>).
side	SheetSide	"end"
title	ReactNode	—
description	ReactNode	—
children	ReactNode	—
footer	ReactNode	—
open	boolean	—
defaultOpen	boolean	—
onOpenChange	ComponentProps<typeof BaseDrawer.Root>["onOpenChange"]	—
closable	boolean	—
size	SheetSize	—	Side sheets' width: sm 420 · md 520 · lg 640 px.
className	string	—	Popup class.