Overlays

Popover

Interactive floating cards anchored to a trigger, with an optional close button.

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 { Popover, PopoverClose, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger } from "@nibapp/ui/components/popover";

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 .

Popover

Convenience wrapper: `<Popover trigger={<Button/>} title="…" description="…">…</Popover>`.

Prop	Type	Default	Description
trigger (required)	ReactElement	—	The trigger element; must accept a ref and DOM props (e.g. <Button>).
title	ReactNode	—
description	ReactNode	—
children	ReactNode	—
side	PopoverContentProps["side"]	—
align	PopoverContentProps["align"]	—
closable	boolean	false	Shows the corner close button.
open	boolean	—
onOpenChange	ComponentProps<typeof BasePopover.Root>["onOpenChange"]	—
className	string	—	Popup class (e.g. a width).

PopoverCloseButton

Icon-only close in the top-right corner.

Also takes the props of Base UI's Popover.Close.

PopoverContent

Portal + positioner + popup. Padded card surface; compose Title/Description/Close inside.

Prop	Type	Default	Description
side	PositionerProps["side"]	"bottom"	The anchor's side it opens on. `inline-start` and `inline-end` follow the writing direction, so a card beside a sidebar's link stays off the sidebar in a right-to-left language too.
align	PositionerProps["align"]	"center"
sideOffset	PositionerProps["sideOffset"]	—	Its distance from the anchor; a function of both boxes where it depends on them.
alignOffset	number	0
anchor	PositionerProps["anchor"]	—	What it points at when that isn't its trigger: an element on the page (a tour's stop, a member's figure in the office), or a function that finds it.
positionerProps	Omit<PositionerProps, "side" \| "align" \| "sideOffset" \| "alignOffset" \| "anchor">	—	The positioner's own props. A `className` here merges with the overlay layer's: a `z-*` of its own puts the popover in another layer.

Also takes .

PopoverDescription

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

PopoverHeader

Also takes the props of a <div> element.

PopoverTitle

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