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 — pastille compacte pour un status, un tag, ou un compteur. 4 variants shadcn : default (primary), secondary, destructive, outline.

Installation

Terminal

$ bext ui add 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 seulement.
className	string	—	Utility Tailwind supplémentaire.

Accessibility

Purement décoratif — pas de rôle ARIA. Si le badge porte une info importante non-répétée dans le texte (ex "New"), ajouter un <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