@ou-imdt/css/docs/native/button.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# buttons

The 'button' tag is preferred way of creating buttons.

There are a few button types with special behavior in forms. The 'submit' type triggers a form submission, while the 'reset' type will clear form fields; 'reset' is not recommended due to usability concerns as users can easily clear their form accidentally.

Buttons can also be created using the 'input' tag and type 'button', 'reset' or 'submit'

## Examples

### General

<div class="card">
  <button>Button</button>
  <!-- With Icons -->  
  <button>
    Coffee
    <i aria-hidden="true">☕</i>
  </button>
  <button>
    <i aria-hidden="true">🍪</i>
    <span class="visually-hidden">Cookie</span>
  </button>
  <!-- Other types -->
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button disabled>Disabled</button>
  <button aria-pressed="true">Aria Pressed</button>
  <!-- Using input tag, not recomended (legacy) -->
  <input type="button" value="Button" />
  <input type="submit" value="Submit" />
  <input type="reset" value="Reset" />
</div>

<details class="compact">
  <summary>HTML</summary>

```html

  <button>Button</button>
  
  <!-- With Icons -->
  <button>
    Coffee
    <i aria-hidden="true">☕</i>
  </button>
  <button>
    <i aria-hidden="true">🍪</i>
    <span class="visually-hidden">Cookie</span>
  </button>

  <!-- Other types -->
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button disabled>Disabled</button>

  <!-- Using input tag, not recomended (legacy) -->
  <input type="button" value="Button" />
  <input type="submit" value="Submit" />
  <input type="reset" value="Reset" />
```

</details>


### Inline buttons

When a button is used inside an inline element such as a `p` tag, or `h1` the style should have the button resize to fit the line-height of the inline element.

<div class="card">

  <h2>Heading 2 <button>More...</button></h2>

  <button>General Button</button>

  <p><small>Lorem ipsum dolor, sit amet <button>inline button</button>.</small></p>

 <p><i>Lorem ipsum dolor, sit amet <button>inline button</button> consectetur adipisicing elit. Doloribus repudiandae dolores omnis voluptate hic sequi perspiciatis asperiores, sint praesentium id natus unde, quam autem, ducimus minima harum impedit ad? Corrupti!</i></p>

</div>

<details class="compact">
  <summary>HTML</summary>

```html

  <h2>Heading 2 <button>More...</button></h2>

  <button>General Button</button>

  <p><small>Lorem ipsum dolor, sit amet <button>inline button</button>.</small></p>

 <p><i>Lorem ipsum dolor, sit amet <button>inline button</button> consectetur adipisicing elit. Doloribus repudiandae dolores omnis voluptate hic sequi perspiciatis asperiores, sint praesentium id natus unde, quam autem, ducimus minima <input type="button" value="inline input">harum impedit ad? Corrupti!</i></p>
```

</details>



### When a button is not a button

In some cases the 'button' element cannot be used, in such cases the use of role="button" can be used, though it is highly possible the 'click' event wont infer 'touch' or 'pointer' as with a standard button. These elements will need to be tested.

<div class="card">
  <div role="button" tabindex="0">Unstyled with behaviour</div>
  <div class="button" role="button" tabindex="0">Styled via class with behaviour</div>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <div role="button" tabindex="0">Unstyled with behaviour</div>
  <div class="button" role="button" tabindex="0">Styled via class with behaviour</div>
```

</details>