Button
Primary action control or link with variants and loading state.
Use Button for an action or link treatment. Select product and marketing contexts deliberately: product for interface actions, marketing for conversion CTAs. Use `fullWidth` when a button or full-width link must fill a bounded container. Open destructive confirmation with a quiet danger action.
Interactive example
Loading interactive example
Button
Button starts an action or opens a link while keeping size, tone, loading, and disabled behavior consistent.
Purpose
Use Button for a clear action. Choose one primary action in a local group. Use concise, verb-led labels such as “Save changes” or “Create project”. Use its link behavior when the same visual treatment must navigate to another location.
Anatomy
The component owns the interactive element, label, optional icon snippets, and loading indicator. The children snippet supplies the visible label. Native buttons keep their built-in keyboard behavior, while href renders a link for navigation. Icon-only Buttons require an accessible label. If completion matters, announce the result separately because loading only marks the action as busy.
Context
Product context
Product is the default context. It uses the semantic Button radius and the small primary shadow. Use it in forms, dialogs, settings, toolbars, tables, empty states, and onboarding flows.
Marketing context
Marketing is an explicit context. It defaults to the pill shape. An enabled primary marketing Button uses the accent glow. Use it for landing-page heroes, pricing sections, compact marketing headers, and promotional banners. Do not use it for routine product actions.
<Button context="marketing">Get started</Button>Shape
Shape remains independent from context. rounded uses the default Button radius. pill uses the full pill radius. circle is for icon-only Buttons. An explicit shape overrides the context default.
Form alignment
Product Button and Input use paired semantic radii. Their heights come from separate control and field recipes, so a preset can tune each role. Use the product default when Button sits beside or below an Input in a form.
Use sm only when the surrounding layout provides a clear and usable target. Icon-only Buttons require an accessible label.
Standalone hero CTA
One standalone hero CTA can use lg when one action dominates the page. Center the CTA in the hero. Do not place a second lg Button beside it.
<Button context="marketing" size="lg">Start a project</Button>Two-button hero CTA
A two-button hero group uses md for both buttons. Variant and glow create the hierarchy. Size does not create hierarchy inside the group.
<Button context="marketing">Get started</Button>
<Button context="marketing" variant="outline">View examples</Button>Tokens and style hooks
Button reads semantic accent, text, focus, radius, spacing, and motion variables. Override those values through Provider rather than targeting internal classes.
API
Inherited prop contracts
Omit<HTMLButtonAttributes, 'children' | 'onclick'>Props from this native base are accepted except the listed members.
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
children | Snippet | snippet | No | undefined |
context | ButtonContext | prop | No | 'product' |
fullWidth | boolean | prop | No | false |
href | string | prop | No | undefined |
icon | IconGlyph | prop | No | undefined |
iconContent | Snippet | snippet | No | undefined |
iconOnly | boolean | prop | No | false |
loading | boolean | prop | No | false |
onclick | (event: MouseEvent) => void | callback | No | undefined |
shape | ButtonShape | prop | No | undefined |
size | ButtonSize | prop | No | 'md' |
tone | ButtonTone | prop | No | 'neutral' |
trailing | IconGlyph | prop | No | undefined |
trailingContent | Snippet | snippet | No | undefined |
variant | ButtonVariant | prop | No | 'primary' |