# Buttons
A button runs an action; a link drawn as a button goes somewhere. One class, `btn`, then a tone, a size or an icon when the button needs one.
## Examples
The plain `btn` is neutral. `btn-primary` marks the one main action of a screen; the other tones say what an action does.
```html
```
### Outline, subtle, text and link
Quieter forms of the same tones for secondary actions, rows and toolbars. `btn-text` has no fill until hovered; `btn-link` reads as a link and keeps a button's size, and it alone wraps a long text.
```html
```
### Sizes
A size is a word: `btn-xs` 24 px, `btn-sm` 28 px, the default 32 px, `btn-lg` 40 px - the heights of every control of the same size. `btn-xl`, 56 px, is for a touch screen and the one action of a page; in a [kiosk](kiosk.md) it grows to a kiosk's size.
```html
```
### Icons
An icon sits beside the words, or alone in a square `btn-icon` whose name is its `aria-label`. `btn-close` draws the close glyph by itself.
```html
Open the site
```
### Groups and toolbars
`btn-group` joins buttons into one control - here a choice of view, each button pressed or not. `btn-toolbar` lays groups and buttons out in a wrapping row.
```html
```
### A choice of one
A segmented choice is Bootstrap's: in a `btn-group`, each `input type="radio" class="btn-check"` before its `label class="btn"`. The radio stays the control - the arrow keys move the choice, the form sends it - and the checked one is drawn pressed, an outline tone filled with its colour; the focus ring goes on the label. A link or a button that is the current one of a group carries `aria-current` and is drawn pressed too.
```html
```
`btn-group-vertical` stacks the buttons of a group, each as wide as the widest.
```html
```
### Toggle and busy
A toggle carries `aria-pressed`. While its action runs, `REDZ.ui.busy(button, promise)` shows a spinner in the button and marks it `aria-disabled`: it keeps the focus and ignores clicks until the promise settles. See [Busy](busy.md) for the words a button says while it waits.
```html
```
### A wait before it works again
`data-cooldown="N"` makes a button wait N seconds: it is `aria-disabled` - it keeps the focus and ignores clicks - and shows the seconds left after its words, in the page's text `cooldown`; then it wakes and the attribute goes. Setting the attribute again starts the wait again; a page reloaded during a wait renders the seconds left. The count is drawn, not read out every second: say the wait in words once, when it starts - "A new code is on its way; ask again in a minute". A cooldown set while the button is [busy](busy.md#busy-button) keeps it disabled after the wait, until its count ends.
```html
```
## States
A state is the attribute accessibility needs anyway, on the button itself: no `active` or `disabled` classes. `aria-expanded` is set by the browser on a button that opens a menu or a dialog.
## Keyboard and accessibility
- `