# Button

Status: stable

Buttons do things. Links go places.

Buttons let managers act: save, send, connect, disconnect. Every screen should make it obvious which things can be clicked and what will happen. There are four kinds of button, one for each level of emphasis, so the most important action always stands out.

Buttons are at least 36px tall. On touch screens, keep at least 8px between buttons so each one is easy to hit.

## Example

```html
<div class="at-inline"><button type="button" class="at-button at-button--primary">Save changes</button><button type="button" class="at-button">Cancel</button></div>
```

## Anatomy

1. **Label**: font-family: var(--at-font); font-size: var(--at-text-sm) /* 14px */; font-weight: var(--at-weight-bold) /* 600 */; color: see States below

2. **Container**: min-height: 36px; border-radius: var(--at-radius-1) /* 6px */; border: 1px solid; background: see States below

3. **Border (secondary)**: border-color: var(--at-border); background: var(--at-surface)

## Size and spacing

- **Size**: min-height: 36px; min-width: none (fits the label)

- **Padding**: block: var(--at-space-3) /* 8px */; inline: var(--at-space-5) /* 16px */

- **Spacing**: gap between buttons: var(--at-space-3) /* 8px */; gap label to icon: var(--at-space-2) /* 4px */

## Variants

### Primary button (emphasis: High)

For the one main action on a screen or in a dialog: Save, Send, Connect. Never more than one per view.

```html
<button type="button" class="at-button at-button--primary">Save changes</button>
```

| State | Specification |

|---|---|

| Default | background: var(--at-bg-primary); color: var(--at-text-inverse) |

| Hover | background: var(--at-bg-primary); filter: brightness(0.92) |

| Focus | outline: 3px solid var(--at-border-focus); outline-offset: 2px |

| Disabled | opacity: 0.5; cursor: not-allowed; avoid: see Usage |

### Secondary button (emphasis: Medium)

The default. For every other action, and for actions repeated in a list.

```html
<button type="button" class="at-button">Cancel</button>
```

| State | Specification |

|---|---|

| Default | background: var(--at-surface); border-color: var(--at-border); color: var(--at-text) |

| Hover | background: var(--at-bg-neutral) |

| Active | background: var(--at-border) |

| Disabled | opacity: 0.5 |

### Danger button (emphasis: Medium)

For actions that delete or disconnect. Always ask for confirmation in a dialog first.

```html
<button type="button" class="at-button at-button--danger">Disconnect</button>
```

| State | Specification |

|---|---|

| Default | color: var(--at-text-danger); border-color: var(--at-border-danger) |

| Hover | background: var(--at-bg-danger-subtle) |

| Disabled | opacity: 0.5 |

### Link button (emphasis: Low)

For low-emphasis actions inside tables and text, such as View or Edit on a row.

```html
<button type="button" class="at-button at-button--link">View history</button>
```

| State | Specification |

|---|---|

| Default | color: var(--at-text-primary); background: transparent |

| Hover | text-decoration: underline |

## When to use

- Primary: the one main action in a view.
- Secondary: every other action.
- Danger: delete or disconnect, always confirmed.
- Link: low-emphasis actions in tables and text.

## When not to use

- To go to another page: use a link. Buttons act, links go.
- More than one primary button in the same view.

## Content

- Start with a verb: "Save changes", "Send reminder", "Connect".
- Use sentence case and keep to three words or fewer.
- Say what will happen, not "OK" or "Submit".

## Do and don't

Do: One primary button, last in the row, labelled with what it does.

```html
<div class="at-inline at-inline--end"><button type="button" class="at-button">Cancel</button><button type="button" class="at-button at-button--primary">Send reminder</button></div>
```

Don't: Two primary buttons, and labels that do not say what happens.

```html
<div class="at-inline at-inline--end"><button type="button" class="at-button at-button--primary">Cancel</button><button type="button" class="at-button at-button--primary">OK</button></div>
```

Do: Save stays pressable. Pressing it shows what to fix.

```html
<div class="at-stack at-stack--tight"><div class="at-field at-field--error"><label class="at-label" for="dd-b1">Monthly price</label><p class="at-error">Enter a price, like 12.50</p><input class="at-input" id="dd-b1" type="text" aria-invalid="true" /></div><div class="at-inline at-inline--end"><button type="button" class="at-button at-button--primary">Save</button></div></div>
```

Don't: A greyed-out Save with no reason why. Keyboard and screen reader users may not find it at all.

```html
<div class="at-stack at-stack--tight"><div class="at-field"><label class="at-label" for="dd-b2">Monthly price</label><input class="at-input" id="dd-b2" type="text" /></div><div class="at-inline at-inline--end"><button type="button" class="at-button at-button--primary" disabled>Save</button></div></div>
```

## Do

- Keep buttons pressable. Validate when pressed and show what to fix (see Form submit and validation).
- While an action runs, keep the label and add a spinner, rather than disabling the button.
- Right-align buttons in dialogs, cards and short tasks, with the primary button last.
- Left-align buttons at the end of long, full-page forms, with the primary button first.

## Don't

- Disable a submit button to stop a form being sent. The one exception: Previous and Next at the ends of a list (see Pagination).
- Use a button to go to another page, or a link to save or delete.
- Put a tooltip on a disabled button: keyboard users cannot reach it.

## Code

```html
<div class="at-inline">
  <button type="button" class="at-button at-button--primary">Save changes</button>
  <button type="button" class="at-button">Cancel</button>
  <button type="button" class="at-button at-button--danger">Disconnect</button>
  <button type="button" class="at-button at-button--link">View history</button>
  <button type="button" class="at-button" disabled>Disabled</button>
</div>
```

## Classes

| Class | What it does |

|---|---|

| `at-button` | Secondary (default) |

| `at-button--primary` | Main action, accent fill |

| `at-button--danger` | Destructive action |

| `at-button--link` | Looks like a link |

| `disabled / aria-disabled="true"` | Unavailable |

## Tokens

`--at-border`, `--at-surface`, `--at-text`, `--at-bg-neutral-hovered`, `--at-bg-neutral-pressed`, `--at-border-primary`, `--at-bg-primary`, `--at-text-inverse`, `--at-border-danger`, `--at-text-danger`, `--at-bg-danger-subtle`, `--at-text-primary`

## Accessibility

- Use button for actions and a for links.
- Focus shows a 3px outline; do not remove it.