i

Button

Doing · researched

Triggers an action such as submitting a form or opening a dialog; comes in several emphasis levels and styles.

atom · also called Toggle button

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Button native: yes antd 6.6.5
Variants
primary, default, dashed, text, link, outlined, solid, filled
Sizes
large, medium, small
States documented
default, disabled, loading
Accessibility guidance
no

Also has danger and ghost props, plus variant/color props. Accepts native button attributes; href renders a link.

2 corrected on re-read
  • variants: ["primary","default","dashed","text","link"] → ["primary","default","dashed","text","link","outlined","solid","filled"] type: primary|dashed|link|text|default; variant: outlined|dashed|solid|filled|text|link
  • a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance

docs ↗ · code ↗

Carbon

Button native: yes @carbon/react 1.117.0
Variants
Primary, Secondary, Tertiary, Ghost, Danger
Sizes
extra small, small, medium, large (productive), large (expressive), extra large, 2XL
States documented
hover, focus, active, disabled, loading
Accessibility guidance
yes

Source renders <button>, or <a> when href is set. Source kinds also include danger--primary, danger--ghost, danger--tertiary. Docs defer states to the Specifications tab, not read.

1 corrected on re-read
  • states_documented: [] → ["hover","focus","active","disabled","loading"] style.mdx tables list Hover/Focus/Active/Disabled; usage.mdx Loading section (inline loading, button disabled)

docs ↗ · code ↗

GOV.UK

Button native: yes govuk-frontend 6.5.1
Variants
Default, Start, Secondary, Warning, Inverse
Sizes
—
States documented
default, disabled
Accessibility guidance
no

Template renders a button element, or an a element when href is set. Disabled buttons are documented with a recommendation against them.

docs ↗ · code ↗

Material Web

Buttons superset native: yes @material/web 2.5.0
Variants
Elevated button, Filled button, Filled tonal button, Outlined button, Text button
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Five separate elements (md-elevated-button, md-filled-button, md-filled-tonal-button, md-outlined-button, md-text-button); source renders a <button>. Docs also describe a soft-disabled state (disabled but focusable).

docs ↗ · code ↗

Primer

Button native: yes @primer/react 38.40.1
Variants
primary, default, invisible, danger
Sizes
small, medium, large
States documented
hover, focus, active, disabled, loading
Accessibility guidance
yes

Renders a native button, or an anchor when as="a" with href. Also documents an 'inactive' state (visually disabled but still interactive).

docs ↗ · code ↗

Spectrum

Button native: yes @spectrum-web-components/button 1.12.4
Variants
primary, secondary, accent, negative
Sizes
s, m, l, xl
States documented
default, hover, active, focus, disabled
Accessibility guidance
yes

Variants and sizes are from the swc-button data file linked on the page; fill-style (fill, outline) and static-color (white, black) are separate options. Native check is the 2nd-gen source, which renders a <button>; the 1st-gen sp-button (1.12.4) is a host element with role=button instead.

docs ↗ · code ↗

USWDS

Button native: yes @uswds/uswds 3.14.0
Variants
secondary, accent-cool, accent-warm, base, outline, inverse, unstyled
Sizes
big
States documented
default, hover, active, focus, disabled
Accessibility guidance
yes

Docs list 'big' as the one size modifier; also documents aria-disabled.

docs ↗ · code ↗

Platform facts

Native elementbuttonSpec (checked) lists these button attributes: command, commandfor, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, popovertarget, popovertargetaction, type, value. command/commandfor and popovertarget make it invoke dialogs and popovers without script. A native button needs no ARIA.
Baselinewidely · 2015-07-29
APG patternbutton
ARIA rolebutton
Shipped by7 of 7 systems

Anatomy

  1. label — Text content gives the accessible name. MDN (Icon buttons): put text inside the button element; MDN does not mention aria-label. APG roles section allows aria-label or aria-labelledby for non-text content. Neither source names visual parts; plain term used.
  2. icon optional — Optional; not named by APG or HTML.

Keys the APG binds

  • SpaceActivates the button.
  • EnterActivates the button.

The seven states

default Idle and available; for toggle buttons aria-pressed false.
hover Pointer-only; not defined by APG or HTML, a CSS :hover concern.
focus Reachable by Tab; MDN advises keeping a focus indicator and using :focus-visible.
active Pressed during activation (CSS :active); toggle buttons use aria-pressed=true for the persistent on state.
disabled disabled attribute removes it from interaction and focus; APG uses aria-disabled for non-native buttons.
error n/a — A button holds no value to validate; errors belong to the form or fields it submits.
loading n/a — Neither HTML nor APG defines a loading state for button; MDN does not mention aria-busy.

Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.