Badges

Token Usage Pill

A compact usage indicator for token budgets, metering, and AI billing surfaces.

tokensmeterusage

Installation

Copy and paste the code into your project.

Accessibility notes

Pair the visual meter with text so the value is understandable without color.

4.2k tokens

Preview accent

TypeScript

export function TokenUsagePill() {
  return (
    <span className="inline-flex items-center gap-2 rounded-full border border-[#40E0D0]/25 bg-[#40E0D0]/10 px-4 py-2 text-sm font-semibold text-[#d8fffb]">
      <span className="h-2 w-16 overflow-hidden rounded-full bg-[#1b1b1d]">
        <span className="block h-full w-2/3 rounded-full bg-[#40E0D0]" />
      </span>
      4.2k tokens
    </span>
  );
}

Usage

<TokenUsagePill />

Related components

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

Ctrl+K

Badges

Shortcut Key

Beginner

A clean keyboard shortcut badge for command hints, docs, and toolbars.

shortcutkeyboarddocs

View component

Badges

Notification Bell

Beginner

A glass notification trigger with a warm unread indicator.

notificationbellstatus

View component