Button
An action (<button>), or a link that looks like one (<a>). Specification: docs/components/button.md
Emphasis × intent
Four emphases (data-emphasis) by five intents (data-intent): 20 variants. Without an intent a button takes the accent; neutral takes none, for ordinary actions that shouldn't draw the eye (Cancel, a toolbar's or a filter bar's buttons, a search trigger).
| Emphasis | (none: the accent) | neutral | success | warning | danger |
|---|---|---|---|---|---|
| high | |||||
| medium (default) | |||||
| low | |||||
| minimal |
Omitting data-emphasis is identical to data-emphasis="medium":
Elements
<button>: it does something
<a>: it goes somewhere
Anatomy
Accessory
After the trailing icon. canon-kbd for a keyboard shortcut (hidden from assistive tech; aria-keyshortcuts on the button carries it). A Count will be able to go here too.
Display
Icon-only, on the button
Icon-only, inherited from a container
Size
On the button
Inherited from a container, with an override
States
Hover, press and keyboard focus are live: try them on any button.
Disabled
Loading
Pressed (toggle button)
Pressed, without JS (form round trip)
Opens a menu
Add aria-haspopup and the theme draws the menu indicator; aria-expanded follows the menu as it opens and closes (canon.js keeps it). Open one to see the expanded state; the menu is a Menu.
Copy
A Button with command="--canon-copy" and commandfor naming what it copies: an input's value, or an element's text. For 2 seconds after copying it has data-state="copied" (here the icon becomes a check) and screen readers hear "Copied". In a field's box, see Field.
Edge cases
Long label
Right-to-left
Leading and trailing icons swap sides in right-to-left text.