Buttons

To create a button, use the <button> element or apply the button class to another element such as an <a>. You can change a button’s appearance using the button-* modifier.

<button type="button">Default</button>
<button type="button" class="button-success">Success</button>
<button type="button" class="button-info">Info</button>
<button type="button" class="button-warning">Warning</button>
<button type="button" class="button-danger">Danger</button>
<button type="button" class="button-inverse">Inverse</button>
<button type="button" class="button button-link">Link</button>

Use the button-small and button-big modifiers to change the size of a button.

Use the button-block modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.

Disabled buttons look like this. Set the disabled property on <button> elements to achieve this effect. For all other elements, apply class="disabled" instead.

You can force buttons to have an active state by applying the active class.

File Buttons

File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an exercise for the user.

File buttons are simply <label> elements with the button class and a nested file input.

<label class="button">
  Select File
  <input type="file">
</label>