# Button

A bare `<button>` is a finished secondary button: bordered, correct height,
hover and active states, a focus ring. Add `is-` modifiers to change intent,
size, or state. Each modifier owns one axis, so they combine freely and order
never matters. This is `button.css` in `@layer components`.

```html
<button>Cancel</button>
<button class="is-primary is-lg is-block">Sign up</button>
```

## Submit Inputs

`input[type=submit]`, `input[type=reset]`, and `input[type=button]` get the
same treatment with no class at all, and take the same modifiers. A submit
input is a button to whoever meets it, so it looks and behaves like one:

```html
<input type="submit" value="Save"/>
<input type="submit" class="is-primary is-lg" value="Sign up"/>
```

The two modifiers they cannot take are `is-loading` and `is-icon`. Both need
content inside the element, and an input is void, with no children and no
`::before`. Use a `<button>` when you need either.

## Coercion

To render a non-button element (typically an `<a>`) as a button, add `.button`.
It gets the identical treatment and takes all the same modifiers:

```html
<a class="button is-primary" href="/install">Install</a>
```

## Intents

| Class | Look |
|---|---|
| *(bare `<button>`)* | Bordered secondary |
| `is-primary` | Accent-filled call to action (monochrome until branded) |
| `is-ghost` | Borderless, quiet |
| `is-danger` | Red destructive fill |

`is-primary` fills with `--accent` and uses `--accent-ink` for its label, so it
takes your brand color automatically. `is-danger` fills with `--danger` and uses
white text deliberately (in dark mode `--danger-ink` is a light text tint, not a
fill foreground) and swaps in the danger focus ring.

```html
<button class="is-primary">Save</button>
<button class="is-ghost">Skip</button>
<button class="is-danger">Delete</button>
```

## Sizes

| Class | Height |
|---|---|
| `is-sm` | 32px |
| *(default)* | 40px |
| `is-lg` | 48px |
| `is-hero` | 56px |

## Width, chrome, and state

| Class | Effect |
|---|---|
| `is-block` | Full width |
| `is-bare` | Strips all chrome: height, padding, border, background |
| `is-loading` | Progress cursor, muted, no pointer events |
| `is-disabled` | Disabled look (alongside the `:disabled` attribute) |

`<button disabled>` and `aria-disabled="true"` also get the disabled treatment.

## Text alignment

A button centers its label, and `text-align` overrides that. This matters when
the button is wider than its text, which is what `is-block`, `width: 100%` or
`flex: 1` in a row all do:

```css
.todo-title { flex: 1; text-align: start; }
```

A button holding elements rather than bare text, an icon beside a label, keeps
its parts centered as a group and ignores `text-align`.

## Icon-only buttons

A button whose only child is a single `<svg>` goes bare automatically: square
padding, no border, a subtle hover fill. No class needed:

```html
<button>
  <svg><!-- icon --></svg>
</button>
```

## Button group

`.button-group` joins adjacent buttons so they share borders. The group rounds
only its outer corners and collapses the seams between buttons:

```html
<div class="button-group">
  <button>Day</button>
  <button class="is-primary">Week</button>
  <button>Month</button>
</div>
```