Inputs

Choice row

One choice in a list, as a button: an icon or logo, a title, a muted detail and something at the end. Plain rows wash on hover; card rows are tiles for weighty choices. aria-pressed or aria-current marks the chosen row, and it takes the selected fill.

Live example

Import

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

tsx

import { Badge } from "@nibapp/ui/components/badge";import { ChoiceRow } from "@nibapp/ui/components/choice-row";

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.

Badge

Small, calm label: subtle tint + matching foreground. Never loud.

Prop	Type	Default	Description
variant	"neutral" \| "outline" \| "success" \| "warning" \| "danger" \| "info"	"neutral"	neutral Quiet gray — metadata, counts, model names. outline Hairline only — for dense lists where fills get noisy. info Neutral wash + fg-muted ink, like every info surface; its `Info` icon is what says "info".
size	"sm" \| "md"	"md"
dot	boolean	false	Leading status dot. Pair with text — the dot alone never carries meaning.
icon	ReactNode \| false	—	Leading icon. The info variant defaults to lucide `Info`: info is neutral, not the accent, so the icon is what tells it apart from a plain neutral badge. Pass your own icon to replace it, or `false` to hide it. A `dot` takes the icon's place.

Also takes .

ChoiceRow

One choice in a list, as a button: an icon or logo, a title and a muted detail, something at the end. Picking a project, a file to show, a model. Say which row is chosen the accessible way, `aria-pressed` for a choice that stays (a model), `aria-current` for the item on show (a file), and the row takes the selected fill.

Prop	Type	Default	Description
variant	"plain" \| "card"	"plain"	plain A row in a list on a surface (a dialog's, a pane's): a hover wash, the selected fill. card A tile with its own hairline, for the few weighty choices a sheet leads with.
leading	ReactNode	—	An icon (sized and muted for you) or a logo.
title (required)	ReactNode	—	What the row picks, with any badge after it. Wrap a long name in a `truncate` span.
detail	ReactNode	—	One muted line under the title, cut with an ellipsis when it doesn't fit.
children	ReactNode	—	More under the detail, wrapping: a warning, a note.
trailing	ReactNode	—	At the end: a price, a shortcut, a check.

Also takes the props of a <button> element, except title and children.