3.0.0-alpha.9 Alpha
Native Styles

Button

<button> .wa-button

Button styles apply your Web Awesome theme to native HTML buttons. Buttons are activated by users to perform actions, such as submitting a form.

Want to do more? Check out the <wa-button> component! 
<button>Button</button>
<input type="button" value="Input (button)">
<input type="reset" value="Input (reset)">
<input type="submit" value="Input (submit)">

Examples

Variants

Use the variant utility classes to set the button's semantic variant.

<button class="wa-neutral">Neutral</button>
<button class="wa-brand">Brand</button>
<button class="wa-success">Success</button>
<button class="wa-warning">Warning</button>
<button class="wa-danger">Danger</button>

Appearance

Use the appearance utility classes to change the button's visual appearance:

<div style="margin-block-end: 1rem;">
  <button class="wa-accent wa-neutral">Accent</button>
  <button class="wa-filled wa-neutral">Filled</button>
  <button class="wa-outlined wa-neutral">Outlined</button>
  <button class="wa-plain wa-neutral">Text</button>
</div>
<div style="margin-block-end: 1rem;">
  <button class="wa-accent wa-brand">Accent</button>
  <button class="wa-filled wa-brand">Filled</button>
  <button class="wa-outlined wa-brand">Outlined</button>
  <button class="wa-plain wa-brand">Text</button>
</div>
<div style="margin-block-end: 1rem;">
  <button class="wa-accent wa-success">Accent</button>
  <button class="wa-filled wa-success">Filled</button>
  <button class="wa-outlined wa-success">Outlined</button>
  <button class="wa-plain wa-success">Text</button>
</div>
<div style="margin-block-end: 1rem;">
  <button class="wa-accent wa-warning">Accent</button>
  <button class="wa-filled wa-warning">Filled</button>
  <button class="wa-outlined wa-warning">Outlined</button>
  <button class="wa-plain wa-warning">Text</button>
</div>
<div>
  <button class="wa-accent wa-danger">Accent</button>
  <button class="wa-filled wa-danger">Filled</button>
  <button class="wa-outlined wa-danger">Outlined</button>
  <button class="wa-plain wa-danger">Text</button>
</div>

Sizes

Use the size utility classes to change a button's size.

<button class="wa-size-s">Small</button>
<button class="wa-size-m">Medium</button>
<button class="wa-size-l">Large</button>

Pill Buttons

Use the wa-pill class to give buttons rounded edges.

<button class="wa-size-s wa-pill">Small</button>
<button class="wa-size-m wa-pill">Medium</button>
<button class="wa-size-l wa-pill">Large</button>

It's often helpful to have a link that looks like a button. This is possible by adding a wa-button class to your link.

<a href="https://example.com/" class="wa-button">Link</a>
<a href="https://example.com/" target="_blank" class="wa-button">New Window</a>
<a href="/assets/images/logo.svg" download="shoelace.svg" class="wa-button">Download</a>

Setting a Custom Width

As expected, buttons can be given a custom width by setting the width CSS property. This is useful for making buttons span the full width of their container on smaller screens.

<button class="wa-size-s" style="width: 100%; margin-bottom: 1rem;">Small</button>
<button class="wa-size-m" style="width: 100%; margin-bottom: 1rem;">Medium</button>
<button class="wa-size-l" style="width: 100%;">Large</button>
    No results