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>