Chip

Colored label chips in three emphasis levels - bold for statuses and deltas, subtle for values, caption for tags - across seven color pairs, plus the StatusDot indicator.

+12.5%$3.252Backend Engineer

Installation

You can add this chip component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add chip

Variants & colors

Three emphasis levels via variant - each available in seven color pairs via color.

limeroseyellowcyanneutralgraysoft
$3.252$3.252$3.252$3.252$3.252$3.252$3.252
Backend EngineerBackend EngineerBackend EngineerBackend EngineerBackend EngineerBackend EngineerBackend Engineer
<Chip variant="bold" color="lime">Active</Chip> {/* statuses, deltas */}<Chip variant="subtle" color="cyan">$3.252</Chip> {/* values */}<Chip variant="caption" color="rose">Designer</Chip> {/* tags */}

StatusDot

The StatusDotindicator pairs with chips inside selects and tables. It's a separate registry item: npx boardui add status-dot.

import { StatusDot } from "@/components/base/badges/status-dot"; <StatusDot color="green" /><StatusDot color="yellow" /><StatusDot color="indigo" />