webawesome/source/docs/buttons.md

layout, title, description

layout	title	description
default.html	Buttons	Add styled buttons to your app with minimal effort.

Buttons

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

<button type="button">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>

XS Button SM Button Default Button LG Button XL 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>

Disabled Button Disabled Link

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>

Active Button Active Link

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>

Secondary Success Info Warning Danger Light Dark

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>

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

Link Button

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>

XS SM Default LG XL

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>

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

Select File