When to use it

Use Button for primary actions, low-emphasis secondary actions, and inline text-like actions that still need the same spacing and state model as the rest of the SDK.

The safest default is to choose the closest built-in variant and size first. Reach for background, foreground, and border only when the surface already has a semantic token story and the built-in presets are too generic.

Composition notes

• Use startSlot and endSlot for icons and badges instead of manually padding children.
• Use asChild when the semantic element should be a link or another interactive root, but you still want the button recipe.
• Keep destructive intent explicit with variant="destructive" instead of only changing color tokens.

Theming guidance

The semantic color props are useful for storefront campaigns because they let a button inherit tone from the surrounding section without forking the recipe. That keeps hover, focus, spacing, and icon alignment consistent while still giving design room to art-direct a CTA.

For marketing-heavy pages, prefer passing theme tokens like var(--foreground) or var(--accent) instead of hard-coded hex values so the same authored example stays portable across presets and brands.