Buttons

<button class="btn">Default Button</button>
<button class="btn btn--minimal">Minimal Button</button>
<button class="btn btn--text">Text Button</button>
<button class="btn btn--text-inverted">Inverted Text Button</button>

Sizes

All buttons are available in three sizes: small, default, and large.

<button class="btn btn--small">Small Size</button>
<button class="btn">Default Size</button>
<button class="btn btn--large">Large Size</button>

Icons

The Button React component supplied with StackupUI has the ability to include icons on either the left or rights side of the label.

<button class="btn btn--emphatic">
  <span class="icon icon--check btn__icon btn__icon--left"></span>
  Left Icon
</button>
<button class="btn btn--emphatic">
  Right Icon
  <span class="icon icon--check btn__icon btn__icon--right"></span>
</button>

Disabled buttons

Buttons are made disabled by adding the disabled and aria-disabled attributes. Not all screen readers behave correctly with the disabled attribute alone, so its a good idea to use both.

<button class="btn" aria-disabled="true" disabled="">Disabled Button</button>

Accessibility concerns

A button is meant to be clicked. The only elements you should be considering adding the .btn classes to are:

• Hyperlinks <a href="/">
• Buttons <button onClick={...}>
• Submit inputs <input type="submit">

If you find yourself adding .btn classes and click behavior to anything else, please don't do it. Click behavior on non-standard elements will pose accessibility challenges to users who are not relying on the visual appearance of the element to understand it's purpose.