Button

Buttons carry the primary color by default. In the classless build every button, [type="button"], [type="submit"], [type="reset"] and [role="button"] gets the same treatment.

Class	Does what
`btn`	Base button
`btn-primary`	Primary color fill (the default look)
`btn-secondary`	Transparent with a border
`btn-ghost`	No border, no fill
`btn-neutral`	Fills from the fallback color instead of the theme color
`btn-disabled`	Greyscale, for elements without a disabled attribute

Basic

<button class="btn">Button</button>
<a href="#" class="btn">Link button</a>

<button>Button</button>
<a href="#" role="button">Link button</a>

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-neutral">Contrast</button>

<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="ghost">Ghost</button>
<button class="contrast">Contrast</button>

Classless: the modifier classes are bare (<code>.primary</code>, <code>.contrast</code>) because they only apply to elements the theme already styles.

Disabled

<button class="btn" disabled>Disabled</button>
<button class="btn btn-disabled">Looks disabled</button>

<button disabled>Disabled</button>
<button class="disabled">Looks disabled</button>

Unstyling a button

<div class="prose">
  <p>Read more about <button class="semantic" style="text-decoration: underline">this topic</button>.</p>
</div>

<div>
  <p>Read more about <button class="semantic" style="text-decoration: underline">this topic</button>.</p>
</div>

.semantic unsets every style so a button can sit inside a sentence. It works in both builds.

Input buttons

<input type="submit" class="btn" value="Submit" />
<input type="reset" class="btn" value="Reset" />

<input type="submit" value="Submit" />
<input type="reset" value="Reset" />

Button-type inputs are styled as buttons in both builds. In 1.x the classless build also applied the text-field rules to them, so they stretched to the full width and carried a bottom margin.