Button styles apply your Web Awesome theme to native HTML buttons. Buttons are activated by users to perform actions, such as submitting a form.
<wa-button> component!
<button>Button</button> <input type="button" value="Input (button)"> <input type="reset" value="Input (reset)"> <input type="submit" value="Input (submit)">
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>
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>
Use wa-size-* 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>
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>
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>
