Badge

Labels status or category. 11px text with outline, solid, and muted variants.

Preview

RecommendedDeliveredIn progress

In action

State

Issue 03

State is a word, not a hue.

On pressPrintedHold

When to use

Use it for

A short status or category next to a title.
solid for done, outline for a recommendation, muted for pending.

Not for

Counts that update live; announce those elsewhere.
Clickable filters; use Toggle.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Badge } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/badge.

2. Vendor the source

npx @noorddev/vlak-cli add badge

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/badge.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Badge } from "@noorddev/vlak-react";

<Badge>Recommended</Badge>
<Badge variant="solid">Delivered</Badge>
<Badge variant="muted">In progress</Badge>

Props

Badge

Prop	Type	Default	Description
`variant`	`"outline" \| "solid" \| "muted"`	`"outline"`	Outline for recommendations, solid for done, muted for pending.

Also accepts HTMLAttributes<HTMLSpanElement>.

Accessibility

A plain <span>; the text is all there is. Keep it to one or two words.

Markup

<span class="rs-badge">Recommended</span><span class="rs-badge-solid">Delivered</span><span class="rs-badge-muted">In progress</span>

Classes

.rs-badge.rs-badge-solid.rs-badge-muted