FRAME/12v0.1 · On Twos

Controlsregistry/ui/badge.tsx/r/badge.json

Badge

Bordered marker-yellow badge with ink text and an optional 14-ray SVG impact burst drawn for two frames.

← All Components
Light · Paper.f12-theme-light
Interactive preview
Top performerStatic badge
Dark · Flashback.f12-theme-dark
Interactive preview
Top performerStatic badge

Install & copy-in source

shadcn CLI (badge.json)
npx shadcn@latest add https://frame12.dev/r/badge.json
Usage example (Badge)
import { Badge } from '@/components/frame12';

export function LeaderBadge() {
  return <Badge pop burst>Top performer</Badge>;
}
WCAG AAAccessibility guarantees

Accessibility notes

  • The radial SVG impact burst is marked aria-hidden="true".
  • Always renders --f-marker-ink text over --f-marker background.
GrammarFRAME/12 rules

Design grammar

  • Pair pop={changed} with useChanged(key) so the impact burst fires only on user-triggered changes, never on initial page load.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/badge.tsx)
PropTypeDefaultDescription
popbooleanfalseTriggers the 4-pose popStep animation and 2-frame impact burst when true.
burstbooleantrueRenders the decorative 14-line radial SVG Burst behind the badge.