Badges

Prompt Badge

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

promptstatusbadge

Installation

Copy and paste the code into your project.

Accessibility notes

Do not rely on the color dot alone; keep the text label visible.

Prompt tuned

Preview accent

TypeScript

export function PromptBadge() {
  return (
    <span className="inline-flex items-center gap-2 rounded-full border border-[#a78bfa]/30 bg-[#a78bfa]/10 px-3 py-1.5 text-xs font-semibold text-[#eee7ff]">
      <span className="h-2 w-2 rounded-full bg-[#a78bfa] shadow-[0_0_12px_rgba(167,139,250,0.8)]" />
      Prompt tuned
    </span>
  );
}

Usage

<PromptBadge />

Related components

Loaders

Glow Loader

Beginner

A three-dot animated loader with turquoise, violet, and warm orange glow accents.

loaderanimationstatus

View component

4.2k tokens

Badges

Token Usage Pill

Beginner

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

tokensmeterusage

View component

Ctrl+K

Badges

Shortcut Key

Beginner

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

shortcutkeyboarddocs

View component