Button
Usage
Triggers an action — submitting a form, confirming a choice, opening a dialog. The reference catalogues 21 labelled button variants; we implement the three axes underneath them (intent, emphasis, size) rather than one class per permutation, which is how the reference ended up maintaining 40 near-copies of the same markup.import { Button } from '@summonware/ui';Best practices
DoUse one solid button per view, for the single most important action. Everything else is outline, subtle or ghost.
DoLabel the action, not the mechanism — "Save changes", "Send invite", not "OK" or "Submit".
DoReach for `danger` only on destructive actions, and pair it with a confirmation step.
Don'tUse a button for navigation. If it only moves the user to another page, it's a link.
Don'tRely on colour alone to distinguish a disabled button — the reduced opacity is a hint, not an affordance.
Anatomy
Label *The visible text. Also the accessible name.
IconOptional leading glyph, passed as a child before the label.
Examples
Common configurations, variations and states.Variants
The six emphasis levels. Solid carries the primary action, outline and subtle sit below it, ghost is for toolbars and dense rows, link is for inline prose, and danger is reserved for destructive work.
Sizes
Small for toolbars and table rows, medium everywhere else, large for a standalone call to action. Medium tracks brand density, so a compact theme shrinks it without any change here.
Disabled
Applies across every variant. Pointer events are removed so a disabled control cannot swallow a click intended for something beneath it.
Full width
Fills the container. This is the shape a button should take in a narrow form column or pinned to the bottom of a mobile screen.
Reference variants
8 of 21 labels from the reference are demonstrated above.DefaultLightLinkOutlineShadowSizes [ Large ]Sizes [ Small ]Disabled ButtonButton With IconOutline Icon ButtonsButton IconBasic Button GroupButton ToolbarButton Toolbar InputButton Toolbar SizeNestingVertical VariationMixed stylesOutlined stylesCheckbox button groupsRadio button groups