3.0.0-alpha.11 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-outlined wa-neutral">A + O</button>
  <button class="wa-accent wa-neutral">Accent</button>
  <button class="wa-outlined wa-neutral">Outlined</button>
  <button class="wa-filled wa-outlined wa-neutral">F + O</button>
  <button class="wa-filled wa-neutral">Filled</button>
  <button class="wa-plain wa-neutral">Plain</button>
</div>
<div style="margin-block-end: 1rem;">
  <button class="wa-accent wa-outlined wa-brand">A + O</button>
  <button class="wa-accent wa-brand">Accent</button>
  <button class="wa-outlined wa-brand">Outlined</button>
  <button class="wa-filled wa-outlined wa-brand">F + O</button>
  <button class="wa-filled wa-brand">Filled</button>
  <button class="wa-plain wa-brand">Plain</button>
</div>
<div style="margin-block-end: 1rem;">
  <button class="wa-accent wa-outlined wa-success">A + O</button>
  <button class="wa-accent wa-success">Accent</button>
  <button class="wa-outlined wa-success">Outlined</button>
  <button class="wa-filled wa-outlined wa-success">F + O</button>
  <button class="wa-filled wa-success">Filled</button>
  <button class="wa-plain wa-success">Plain</button>
</div>
<div style="margin-block-end: 1rem;">
  <button class="wa-accent wa-outlined wa-warning">A + O</button>
  <button class="wa-accent wa-warning">Accent</button>
  <button class="wa-outlined wa-warning">Outlined</button>
  <button class="wa-filled wa-outlined wa-warning">F + O</button>
  <button class="wa-filled wa-warning">Filled</button>
  <button class="wa-plain wa-warning">Plain</button>
</div>
<div>
  <button class="wa-accent wa-outlined wa-danger">A + O</button>
  <button class="wa-accent wa-danger">Accent</button>
  <button class="wa-outlined wa-danger">Outlined</button>
  <button class="wa-filled wa-outlined wa-danger">F + O</button>
  <button class="wa-filled wa-danger">Filled</button>
  <button class="wa-plain wa-danger">Plain</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>

Opting In to Native Button Styles

If you want to use the Native Button styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/button.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/button.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results