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

Small Button Normal Button Big 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>

Small Block Button

Normal Block Button

Big Block Button

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

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

Disabled

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

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

Active

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>

Primary Secondary Success Info Warning Danger Light Dark

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>

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

Select File