Components / primitives

primitives · @awesome-ds/react

Badge

Compact status or category label.

Rules: rule.foundations.semantic-tokens

State matrix

idlerequired

Anatomy

  • inline status container
  • short label

Keyboard contract

Not focusable unless nested in an interactive owner.

Screen-reader contract

Text is read in document order; decorative badges must be hidden by the caller.

Content rules

  • Use one or two short words.
  • Do not place critical meaning only in tone.

Public API

PropTyperequiredDescription
toneBadgeTone—Semantic visual tone
childrenReactNoderequiredStatus text
…nativeHTMLAttributes<HTMLSpanElement>—Native span attributes

Adaptation contracts

RTL
Preserve icon meaning, use logical spacing, and mirror only directional artwork.
High contrast
Keep native outlines and a visible text or border affordance in forced colors.
Reduced motion
Remove hover travel and loading flourish while retaining immediate state feedback.

Verification IDs

Badge/tone-text

Live

Live

NeutralAccent

Copyable example

import { Badge } from "@awesome-ds/react";

<Badge tone="accent">New</Badge>