# Buttons

<button type="button">Ordinary</button>
<button type="button" class="secondary">Secondary</button>
<button type="button" class="contrast">Contrast</button>
<button type="button" class="danger">Danger</button>

<button type="button" disabled>Ordinary</button>
<button type="button" class="secondary" disabled>Secondary</button>
<button type="button" class="contrast" disabled>Contrast</button>
<button type="button" class="danger" disabled>Danger</button>

<button type="button" class="outline">Ordinary</button>
<button type="button" class="outline secondary">Secondary</button>
<button type="button" class="outline contrast">Contrast</button>
<button type="button" class="outline danger">Danger</button>

<button type="button" class="outline" disabled>Ordinary</button>
<button type="button" class="outline secondary" disabled>Secondary</button>
<button type="button" class="outline contrast" disabled>Contrast</button>
<button type="button" class="outline danger" disabled>Danger</button>

<button type="button"><winter-icon>help</winter-icon><span>With icon</span></button>
<button type="button"><span>With icon</span><winter-icon>help</winter-icon></button>
<button type="button"><winter-icon>help</winter-icon></button>
<button type="button">No icon</button>


Inline with text <button type="button">Hello!</button>

<div role="button" tabindex="0">Div as a button</div><a role="button">Anchor as button</a>

<input type="submit" />
<input type="button" value="Input" />
<input type="reset" />

<div role="group">
  <button>Grouped</button>
  <button>Buttons</button>
  <button>Yay</button>
</div>
