Badge

Badges highlight status, counts, or short categorical labels. Use them to draw attention to metadata, statuses, or to categorize items.

Interactive preview

Change variant and text to see the badge update.

Variant

Text

Badge

Props

Prop	Type	Default	Description
variant	"default" \| "primary" \| "success" \| "warning" \| "error" \| "info"	"default"	Color scheme indicating the badge type.
children	ReactNode	—	Badge content (text, icons, or both).
className	string	""	Additional Tailwind classes.
...props	HTMLAttributes<HTMLSpanElement>	—	Standard span attributes.

Installation

Install packages

pnpm add @akanaka-design/components @akanaka-design/tokens

Styles (app root)

import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Basic usage

import { Badge } from "@akanaka-design/components";

export function Example() {
  return <Badge>New</Badge>;
}

All variants

<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>

With icon

Combine text with an inline icon:

With icon

<Badge variant="success">
  <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
  </svg>
  Verified
</Badge>

In context

Badges work well alongside names, titles, or labels:

In context

<div className="flex items-center gap-2">
  <span className="font-medium">John Smith</span>
  <Badge variant="primary">Admin</Badge>
</div>

Guidelines

When to use

Status indicators (active, pending, archived)
Counts (notifications, items in cart)
Categories or tags
User roles or permissions

When not to use

Long text — keep badges to 1–2 words
Primary actions — use buttons instead
Navigation — use links or tabs

Content

Use short, scannable labels
Match variant to meaning: success for positive, error for negative, warning for caution
Be consistent — same status should always use the same variant