Badge

Badges are compact, visually distinct labels for status, counts, or categories. They support multiple variants and can be made removable for chip‑like interactions.

Use Badge to highlight short bits of information. Keep text concise. For interactive “chips”, provide an onRemove handler to render a removable badge.

Features

Variants: default, secondary, destructive, outline
Optional removable behavior via onRemove
Keyboard‑focus styles and accessible rendering
Easy customization using utility classes

Usage

import { Badge } from '@loke/design-system/badge';

export default function Example() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">New</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Beta</Badge>
    </div>
  );
}

Tips:

Use short, scannable text (1–2 words or small numbers)
Choose the variant that matches semantic tone (e.g., destructive for errors)
Prefer className for one‑off style tweaks

Props

Prop

Type

Examples

Variants

Default

Secondary

Destructive

Outline

<div className="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

With icon

New feature

<Badge>
  <svg className="mr-1 h-3 w-3" /* …icon props… */ />
  New feature
</Badge>

Sizes (typographic)

Small

Default

Large

<div className="flex flex-wrap items-center gap-2">
  <Badge className="text-xs">Small</Badge>
  <Badge>Default</Badge>
  <Badge className="text-lg">Large</Badge>
</div>

Numbers

100

1000+

<div className="flex flex-wrap gap-2">
  <Badge>1</Badge>
  <Badge variant="secondary">10</Badge>
  <Badge variant="destructive">100</Badge>
  <Badge variant="outline">1000+</Badge>
</div>

Removable badges

function RemovableBadges() {
  const [tags, setTags] = React.useState(["Analytics", "Billing", "Beta", "v2"]);
  return (
    <div className="flex flex-wrap gap-2">
      {tags.map((tag, i) => (
        <Badge key={tag} onRemove={() => setTags(tags.filter((_, idx) => idx !== i))}>
          {tag}
        </Badge>
      ))}
    </div>
  );
}

Custom styling

Custom

<Badge className="bg-purple-500 text-white hover:bg-purple-700">Custom</Badge>

Accessibility

Badges are typically decorative labels. Ensure the surrounding UI conveys meaning to screen readers.
When using numbers in badges, provide nearby text context (e.g., “Notifications”).
Removable badges render as a button when onRemove is provided. Ensure the label content is meaningful (e.g., the tag name) so the action is clear.

Best practices

Keep text concise; avoid wrapping long content inside badges
Use variants consistently to convey meaning (e.g., destructive for errors)
Don’t overuse badges—too many reduce their visual impact
Prefer onRemove for interactive chip behavior; otherwise keep badges non‑interactive

Badge

On this page