Primitive · v1
Button
Three variants × three sizes × six tones. Hover/active colors derived from the tone via color-mix().
— Live
— Glyphs
icon leads and names the action;
iconRight trails and names a direction or an outcome, never a second subject.
Both take a registry name, so a call site can no longer paste a character into the label and hope the platform has it.
The glyph rides the rung below the button's text size, which is why it scales with size and density.
When to use
Click-driven, immediate-effect actions. For destructive operations, prefer tone="ember" variant="solid". For navigation, use a real <a>.
Cutting-edge anchors
color-mix(in oklch, …) resolves hover/active in perceptual space. @scope keeps styles local without selector mangling. Density via calc(* var(--density)).