Badge

Displays a badge or a component that looks like a badge.

DefaultSecondaryDestructiveOutline

tsx

1
2<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>

Badge is a compact label for a status, a tag or a count. Four shadcn variants: default (primary), secondary, destructive, outline.

Installation

Terminal

$ bext ui add badge

Copy and paste the following into src/components/ui/badge.tsx.

badge.tsx

1
2<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>

Usage

tsx

1
2
3
4
5
6import { Badge } from "@bext-stack/ui/primitives"

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Anatomy

<Badge variant="default|secondary|destructive|outline">Label</Badge>

API Reference

Badge

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline"	"default"	Style. default=bg-primary, secondary=bg-secondary, destructive=bg-destructive, outline=border only.
className	string	—	Additional Tailwind utilities.

Accessibility

Purely decorative, with no ARIA role. If the badge carries important information that is not repeated in the text (e.g. "New"), add a <span class="sr-only">.

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// Badges are tiny static status pills. Each variant is just a
// pill-shaped <span> with its own background + text colour.
const base = {
  display: "inline-flex", alignItems: "center",
  padding: "2px 10px", borderRadius: 9999, fontSize: 12, fontWeight: 600,
  border: "1px solid transparent", lineHeight: 1.6,
};
const variants = {
  default: { ...base, background: "#0a0a0a", color: "#fff" },
  secondary: { ...base, background: "#f1f5f9", color: "#0a0a0a" },
  outline: { ...base, background: "#fff", color: "#0a0a0a", borderColor: "#e2e8f0" },
  destructive: { ...base, background: "#dc2626", color: "#fff" },
};

export default function Page() {
  return (

The React idiom: same UI, for comparison.

← Avatar Breadcrumb →

On This Page