${require('./_head.html') title="Buttons" description="The essential button in pure HTML, without .classes for the default style." canonical="buttons.html" } ${require('./_nav.html')}
${require('./_sidebar.html') active="buttons-link"}

Buttons

The essential button in pure HTML, without .classes for the default style.

<button>Button</button>
<input type="submit">

Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

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

Buttons come with .secondary and .contrast styles.

Secondary Contrast
<a href="#" role="button" class="secondary">Secondary</a>
<a href="#" role="button" class="contrast">Contrast</a>

And a classic .outline variant.

Primary Secondary Contrast
${require('./_footer.html')}