Navigation

Separator

Accessible hairline dividers — horizontal, vertical, or with a centered label.

Live example

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

tsx

import { IconButton } from "@nibapp/ui/components/button";import { Separator } from "@nibapp/ui/components/separator";

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.

Square, icon-only button. Pair with <Tooltip> to surface the label visually (a `disabledReason` brings its own).

Prop	Type	Default	Description
size	"xs" \| "sm" \| "md" \| "lg"	"md"
aria-label (required)	string	—	Required: icon-only controls must be named for assistive tech.
children (required)	ReactNode	—
loading	boolean	false
disabledReason	string \| undefined	—	Disables the button and says why, as Button's `disabledReason`.

Also takes the props of Base UI's Button, except aria-label and children.

A hairline divider. With `label`, two lines flank centered text.

Prop	Type	Default	Description
label	ReactNode	—	Centered text (e.g. "Today", "or"). Horizontal only.
strong	boolean	false	Stronger line for section breaks.

Also takes the props of Base UI's Separator, except children.