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

AIPlanningWritingReviewing

Badges

Agent Status Ribbon

Beginner

A compact status ribbon for showing the current phase of an agent workflow.

agentstatusworkflow

View component

EBAIQA

3 reviewers

Badges

Avatar Stack

Beginner

A small collaborator stack for reviews, presence, and team-owned workflows.

avatarpresenceteam

View component

KCommandEnterRunEscClose

Badges

Command Hint Bar

Beginner

A compact shortcut strip for command palettes, editors, and agent workspaces.

shortcutkeyboardcommand

View component