Buttons

To create a button, use the <button> element or apply the button class to an <a>.

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

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

<button type="button" class="button-small">Small Button</button>
<button type="button">Normal Button</button>
<button type="button" class="button-big">Big Button</button>

Use the button-block modifier to make a button span the entire width of its parent.

<button type="button" class="button-block button-small">Small Block Button</button>
<button type="button" class="button-block">Normal Block Button</button>
<button type="button" class="button-block button-big">Big Block Button</button>

To disable a button set the disabled property on <button> elements.

<button type="button" disabled>Disabled</button>

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

<button type="button" class="active">Active</button>

Variations

Use the button-* modifier to create variations.

<button type="button">Primary</button>
<button type="button" class="button-secondary">Secondary</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-light">Light</button>
<button type="button" class="button-dark">Dark</button>

Buttons can be styled to look like normal links with the button-link modifier. Button sizing is maintained so they align properly with other buttons.

<button type="button">Button</button>
<a href="#" class="button button-link">Link</a>
Link

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>