# Button

Source: https://iriscss.com/documentation/elements/button/

Every `button` is styled with no class. Color, style, size and state classes combine freely.

Iris styles `button`, `input[type="submit"]`, `input[type="reset"]`, `input[type="button"]` and anything with `role="button"`, including links.

```html
<button>Button</button>
<a href="#" role="button">Link</a>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
```

## Colors

A color class sets `--i-variant` and `--i-variant-inverse`. The button builds its background, border, text and focus ring from them.

```html
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="contrast">Contrast</button>
<button class="accent">Accent</button>
<button class="info">Info</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>
<button class="link">Link</button>
```

For a color outside the list, set the two variables yourself.

```html
<button style="--i-variant: #7c3aed; --i-variant-inverse: #fff">Custom</button>
```

## Styles

`.outlined` keeps only the border and text. `.tint` is a pale tint and `.deep` a deep shade, the same in both themes.

```html
<button class="primary outlined">Outlined</button>
<button class="danger outlined">Outlined</button>
<button class="primary tint">Tint</button>
<button class="danger tint">Tint</button>
<button class="primary deep">Deep</button>
<button class="danger deep">Deep</button>
```

`.rounded` gives pill corners and `.square` removes them.

```html
<button class="info rounded">Rounded</button>
<button class="info">Default</button>
<button class="info square">Square</button>
```

## Sizes

The default size needs no class. `.medium` is larger than the default.

```html
<button class="accent small">Small</button>
<button class="accent">Default</button>
<button class="accent medium">Medium</button>
<button class="accent large">Large</button>
```

## States

`.hover`, `.active` and `.focus` show a state without interaction, for previews and docs. `disabled`, `aria-busy="true"` and `aria-current` work as attributes. A button with `aria-current` keeps the hover look, for the selected item in a toolbar.

```html
<button class="success">Normal</button>
<button class="success hover">Hover</button>
<button class="success active">Active</button>
<button class="success focus">Focus</button>
<button class="success" aria-current="true">Current</button>
<button class="success" disabled>Disabled</button>
<button class="success" aria-busy="true">Loading</button>
```

## File input

The picker button of a file input is a secondary button.

```html
<input type="file" aria-label="Upload a file">
```

## Group

`.group` joins buttons into one control. See [group](https://iriscss.com/documentation/form/group/index.html.md) for inputs and search bars.

```html
<div class="group" role="group">
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</div>
```

## Variables

Buttons share padding and the disabled opacity with form controls, see [controls](https://iriscss.com/documentation/form/controls/index.html.md#variables).

| Variable | Default |
| --- | --- |
| `--i-button-shadow` | `0 0 0 #0000` |
| `--i-button-hover-shadow` | `0 0 0 #0000` |