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>
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.
<button type="button">Button</button>
<a href="#" class="button button-link">Link</a>
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>