Playground

Badge

Tweak the tone and props live — this is the real Badge component.

<div className="flex flex-wrap items-center gap-2">
<Badge tone="accent">Accent</Badge>
<Badge tone="positive" subtle>Positive, subtle</Badge>
<Badge tone="danger">Danger</Badge>
</div>

Try every tone (neutral/accent/positive/info/warning/danger) with subtle on and off — see the Badge catalog page for the full prop reference.

Button

Tweak the variant, size, and props live — this is the real Button component.

Card

Rearrange the composition live — this is the real Card component.