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

AIPlanningWritingReviewing

Badges

Agent Status Ribbon

Beginner

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

agentstatusworkflow

View component

Badges

Notification Bell

Beginner

A glass notification trigger with a warm unread indicator.

notificationbellstatus

View component

EBAIQA

3 reviewers

Badges

Avatar Stack

Beginner

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

avatarpresenceteam

View component