# States

Source: https://iriscss.com/documentation/modifiers/states/

`.hover`, `.active`, `.focus` and `.disabled` show a state without touching the element.

Use them for demos, style guides and design reviews. They work on buttons, links, inputs, selects, textareas and select buttons, and look the same as the real state.

## Buttons

```html
<button class="primary">Normal</button>
<button class="primary hover">Hover</button>
<button class="primary active">Active</button>
<button class="primary focus">Focus</button>
<button class="primary disabled" aria-disabled="true">Disabled</button>
```

## Links

```html
<p>
  <a href="#">Normal</a> &middot; <a href="#" class="hover">Hover</a> &middot;
  <a href="#" class="focus">Focus</a> &middot; <a class="disabled" aria-disabled="true">Disabled</a>
</p>
```

## Form controls

```html
<input type="text" placeholder="Normal" aria-label="Normal">
<input type="text" class="hover" placeholder="Hover" aria-label="Hover">
<input type="text" class="focus" placeholder="Focus" aria-label="Focus">
<input type="text" class="disabled" aria-disabled="true" placeholder="Disabled" aria-label="Disabled">
```

## Real states

`.disabled` only changes the look and blocks the pointer. For a control that is really off, use the `disabled` attribute, or `aria-disabled="true"` on a link. The current page or item takes `aria-current`, which shows the hover look. See [ARIA attributes](https://iriscss.com/documentation/accessibility/aria-attributes/index.html.md).

```html
<button disabled>Disabled</button>
<button aria-current="true">Current</button>
```

## Variables

Disabled elements fade to `--i-control-disabled-opacity`, listed with the other [control variables](https://iriscss.com/documentation/form/controls/index.html.md#variables).