component
Button
also called push button (community), cta button (community), action button (community)
A control that runs an action when activated, labelled with the thing it does rather than with where it goes.
A button is judged by what happens after it, so the label is the design. Name the outcome (“Publish”, “Delete draft”, “Send invite”) rather than the mechanism (“Submit”) or the mood (“OK”), because the label is the only part most people read before pressing. Emphasis is a hierarchy and not decoration: one loud button for the thing the screen is about, quieter treatments for everything alongside it. While the action is in flight the button says so and keeps its size, since a control that grows by a word mid-press moves itself out from under the pointer.
The line worth defending is against the link. If activating it takes you to
another place, it is a link, even when it is painted to look like a button; if it
changes something where you already are, it is a button, even when it is painted
to look like text. The difference is not cosmetic. Links can be copied, opened in
a new tab, and are activated by Enter alone; buttons answer both Enter and Space,
and have no address to hand out. Reach for <button> or <a href> accordingly,
never a div with a click handler, because the element is what carries the role,
the focus stop, and the keyboard behaviour you would otherwise rebuild by hand.
The names collect confusion. “CTA button” is marketing’s word for whichever
button a page most wants pressed, and describes a position in a funnel rather
than a behaviour. “Push button” is the older toolkit name, kept alive in
accessibility guidance to separate the plain kind from a toggle button, which
stays pressed and reports aria-pressed. “Action button” usually drifts in from
Material’s floating action button. A radio button, despite the name, is not one
of these at all: it picks a value from a set and comes with arrow-key semantics
that a button never has.
Which word?
| If you want | say |
|---|---|
| the control does something instead of going somewhere | button |
| the control goes somewhere rather than doing something | link |
Related
Variants: Floating action button · Ghost button · Icon button · Toggle button
See also: Focusable disabled · Pressed state
Implementations
Specimens illustrate the concept; for production use, start here.
| aria-apg | Button |
| material | Buttons |
| hig | Buttons |
| fluent | Button |
| carbon | Button |
| polaris | Button |
| shadcn | Button |