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-[xs|sm|lg|xl] modifiers to change the size of a button.

<button type="button" class="button-xs">XS Button</button>
<button type="button" class="button-sm">SM Button</button>
<button type="button">Default Button</button>
<button type="button" class="button-lg">LG Button</button>
<button type="button" class="button-xl">XL Button</button>

To disable a button set the disabled property on <button> elements. You can simulate the disabled state on links by adding the disabled class, but additional JavaScript is required to prevent them from being activated.

<button type="button" disabled>Disabled Button</button>
<a href="#" class="button disabled">Disabled Link</a>

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

<button type="button" class="active">Active Button</button>
<a href="#" class="button active">Active Link</a>

Variations

Use the button-* modifier to create variations.

<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>

Block Buttons

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

<button type="button" class="button-block">Block Button</button>

Link Buttons

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.

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

Loader Buttons

Buttons can be given a loading state with the button-loader modifier. This will make the button text invisible and display a loader using the ::after pseudo-element. The button’s width will not be affected.

<button type="button" class="button-loader button-xs">XS</button>
<button type="button" class="button-loader button-sm">SM</button>
<button type="button" class="button-loader">Default</button>
<button type="button" class="button-loader button-lg">LG</button>
<button type="button" class="button-loader button-xl">XL</button>

Loader buttons also work with button variations.

<button type="button" class="button-loader button-secondary">Button</button>
<button type="button" class="button-loader button-success">Button</button>
<button type="button" class="button-loader button-info">Button</button>
<button type="button" class="button-loader button-warning">Button</button>
<button type="button" class="button-loader button-danger">Button</button>
<button type="button" class="button-loader button-light">Button</button>
<button type="button" class="button-loader button-dark">Button</button>

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>