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

Using a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.

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 StatusDot indicator 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" />