Badge

Numeric counter pills for nav counts and unread totals, plus the Kbd keyboard-shortcut hint used in the sidebar's quick search.

91152⌘L

Installation

You can add this badge 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 badge

Colors

neutral (the default) sits on light surfaces; primary is tuned for the blue gradient surfaces like the primary button and selected nav items.

<Badge color="neutral">91</Badge> {/* neutral pill (default) */}<Badge color="primary">152</Badge> {/* for primary/gradient surfaces */}

Kbd

The Kbdshortcut hint shares the badge shape. It's a separate registry item - add it with npx boardui add kbd.

⌘L⌘Kesc
import { Kbd } from "@/components/base/kbd/kbd"; <Kbd>⌘L</Kbd><Kbd>⌘K</Kbd><Kbd>esc</Kbd>