Components

Button

<wa-button>

Since 2.0

Stable

Buttons represent actions that are available to the user.

Just want the styles? Check out the Button native styles!

Button

<wa-button>Button</wa-button>

Examples Jump to heading

Variants Jump to heading

Use the variant attribute to set the button's semantic variant.

Neutral

Brand

Success

Warning

Danger

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

Appearance Jump to heading

Use the appearance attribute to change the button's visual appearance.

Accent

Outlined

Filled

Plain

Accent

Outlined

Filled

Plain

Accent

Outlined

Filled

Plain

Accent

Outlined

Filled

Plain

Accent

Outlined

Filled

Plain

<div class="wa-stack">
  <div class="wa-gap-m">
    <wa-button appearance="accent" variant="neutral">Accent</wa-button>
    <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
    <wa-button appearance="filled" variant="neutral">Filled</wa-button>
    <wa-button appearance="plain" variant="neutral">Plain</wa-button>
  </div>
  <div class="wa-gap-m">
    <wa-button appearance="accent" variant="brand">Accent</wa-button>
    <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
    <wa-button appearance="filled" variant="brand">Filled</wa-button>
    <wa-button appearance="plain" variant="brand">Plain</wa-button>
  </div>
  <div class="wa-gap-m">
    <wa-button appearance="accent" variant="success">Accent</wa-button>
    <wa-button appearance="outlined" variant="success">Outlined</wa-button>
    <wa-button appearance="filled" variant="success">Filled</wa-button>
    <wa-button appearance="plain" variant="success">Plain</wa-button>
  </div>
  <div class="wa-gap-m">
    <wa-button appearance="accent" variant="warning">Accent</wa-button>
    <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
    <wa-button appearance="filled" variant="warning">Filled</wa-button>
    <wa-button appearance="plain" variant="warning">Plain</wa-button>
  </div>
  <div class="wa-gap-m">
    <wa-button appearance="accent" variant="danger">Accent</wa-button>
    <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
    <wa-button appearance="filled" variant="danger">Filled</wa-button>
    <wa-button appearance="plain" variant="danger">Plain</wa-button>
  </div>
</div>

Sizes Jump to heading

Use the size attribute to change a button's size.

Small

Medium

Large

<wa-button size="small">Small</wa-button>
<wa-button size="medium">Medium</wa-button>
<wa-button size="large">Large</wa-button>

Pill Buttons Jump to heading

Use the pill attribute to give buttons rounded edges.

Small

Medium

Large

<wa-button size="small" pill>Small</wa-button>
<wa-button size="medium" pill>Medium</wa-button>
<wa-button size="large" pill>Large</wa-button>

It's often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an <a> under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the rel, target, and download attributes.

Link

New Window

Download

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

Setting a Custom Width Jump to heading

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.

Small

Medium

Large

<wa-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</wa-button>
<wa-button size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</wa-button>
<wa-button size="large" style="width: 100%;">Large</wa-button>

Prefix and Suffix Icons Jump to heading

Use the prefix and suffix slots to add icons.

Settings

Refresh

Open

Settings

Refresh

Open

Settings

Refresh

Open

<wa-button size="small">
  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
  Settings
</wa-button>

<wa-button size="small">
  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
  Refresh
</wa-button>

<wa-button size="small">
  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
  Open
</wa-button>

<br /><br />

<wa-button>
  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
  Settings
</wa-button>

<wa-button>
  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
  Refresh
</wa-button>

<wa-button>
  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
  Open
</wa-button>

<br /><br />

<wa-button size="large">
  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
  Settings
</wa-button>

<wa-button size="large">
  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
  Refresh
</wa-button>

<wa-button size="large">
  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
  Open
</wa-button>

Caret Jump to heading

Use the caret attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.

Small

Medium

Large

<wa-button size="small" caret>Small</wa-button>
<wa-button size="medium" caret>Medium</wa-button>
<wa-button size="large" caret>Large</wa-button>

Loading Jump to heading

Use the loading attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.

Brand

Success

Neutral

Warning

Danger

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

Disabled Jump to heading

Use the disabled attribute to disable a button.

Brand

Success

Neutral

Warning

<wa-button variant="brand" disabled>Brand</wa-button>
<wa-button variant="success" disabled>Success</wa-button>
<wa-button variant="neutral" disabled>Neutral</wa-button>
<wa-button variant="warning" disabled>Warning</wa-button>

Styling Buttons Jump to heading

This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's variant attribute instead of a class (e.g. wa-button[variant="brand"]).

Pink Button

<wa-button class="pink">Pink Button</wa-button>

<style>
  wa-button.pink::part(base) {
    border-radius: 6px;
    border: solid 2px;
    background: #ff1493;
    border-top-color: #ff7ac1;
    border-left-color: #ff7ac1;
    border-bottom-color: #ad005c;
    border-right-color: #ad005c;
    color: white;
    font-size: 1.125rem;
    box-shadow: 0 2px 10px #0002;
    transition: all var(--wa-transition-slow) var(--wa-transition-easing);
  }

  wa-button.pink::part(base):hover {
    transform: scale(1.05);
  }

  wa-button.pink::part(base):active {
    border-top-color: #ad005c;
    border-right-color: #ff7ac1;
    border-bottom-color: #ff7ac1;
    border-left-color: #ad005c;
    transform: translateY(1px);
  }

  wa-button.pink::part(base):focus-visible {
    outline: dashed 2px deeppink;
    outline-offset: 4px;
  }
</style>

Slots Jump to heading

Learn more about using slots.

Name	Description
(default)	The button's label.
`prefix`	A presentational prefix icon or similar element.
`suffix`	A presentational suffix icon or similar element.

Attributes & Properties Jump to heading

Learn more about attributes and properties.

Name	Description	Reflects
`variant` `variant`	The button's theme variant. Type `'neutral' \| 'brand' \| 'success' \| 'warning' \| 'danger'` Default `'neutral'`
`appearance` `appearance`	The button's visual appearance. Type `'accent' \| 'filled' \| 'outlined' \| 'plain'` Default `'accent'`
`size` `size`	The button's size. Type `'small' \| 'medium' \| 'large'` Default `'medium'`
`caret` `caret`	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. Type `boolean` Default `false`
`disabled` `disabled`	Disables the button. Does not apply to link buttons. Type `boolean` Default `false`
`loading` `loading`	Draws the button in a loading state. Type `boolean` Default `false`
`pill` `pill`	Draws a pill-style button with rounded edges. Type `boolean` Default `false`
`type` `type`	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form. Type `'button' \| 'submit' \| 'reset'` Default `'button'`
`name` `name`	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when `href` is present. Type `string \| null` Default `null`
`value` `value`	The value of the button, submitted as a pair with the button's name as part of the form data, but only when this button is the submitter. This attribute is ignored when `href` is present. Type `string \| null` Default `null`
`href` `href`	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. Type `string` Default `''`
`target` `target`	Tells the browser where to open the link. Only used when `href` is present. Type `'_blank' \| '_parent' \| '_self' \| '_top'`
`rel` `rel`	When using `href`, this attribute will map to the underlying link's `rel` attribute. Type `string \| undefined`
`download` `download`	Tells the browser to download the linked file as this filename. Only used when `href` is present. Type `string \| undefined`
`form` `form`	The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button. Type `string \| null` Default `null`
`formAction` `formaction`	Used to override the form owner's `action` attribute. Type `string`
`formEnctype` `formenctype`	Used to override the form owner's `enctype` attribute. Type `'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`
`formMethod` `formmethod`	Used to override the form owner's `method` attribute. Type `'post' \| 'get'`
`formNoValidate` `formnovalidate`	Used to override the form owner's `novalidate` attribute. Type `boolean`
`formTarget` `formtarget`	Used to override the form owner's `target` attribute. Type `'_self' \| '_blank' \| '_parent' \| '_top' \| string`

Methods Jump to heading

Learn more about methods.

Name	Description	Arguments
`click()`	Simulates a click on the button.
`focus()`	Sets focus on the button.	`options: FocusOptions`
`blur()`	Removes focus from the button.

Events Jump to heading

Learn more about events.

Name	Description
`wa-blur`	Emitted when the button loses focus.
`wa-focus`	Emitted when the button gains focus.
`wa-invalid`	Emitted when the form control has been checked for validity and its constraints aren't satisfied.

CSS custom properties Jump to heading

Learn more about CSS custom properties.

Name	Description
`--background-color`	The button's background color when the button is not being interacted with.
`--background-color-active`	The button's background color when active.
`--background-color-hover`	The button's background color on hover.
`--border-color`	The color of the button's border when the button is not being interacted with.
`--border-color-active`	The color of the button's border when active.
`--border-color-hover`	The color of the button's border on hover.
`--text-color`	The color of the button's label when the button is not being interacted with.
`--text-color-active`	The color of the button's label when active.
`--text-color-hover`	The color of the button's label on hover.

CSS parts Jump to heading

Learn more about CSS parts.

Name	Description
`base`	The component's base wrapper.
`prefix`	The container that wraps the prefix.
`label`	The button's label.
`suffix`	The container that wraps the suffix.
`caret`	The button's caret icon, a `<wa-icon>` element.
`spinner`	The spinner that shows when the button is in the loading state.

Dependencies Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Importing Jump to heading

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/button/button.js';

Coming soon!

Getting Started

Resources

Themes

Components

Native Styles

Style Utilities

Layout

Color Palettes

Design Tokens

Button

Examples Jump to heading

Variants Jump to heading

Appearance Jump to heading

Sizes Jump to heading

Pill Buttons Jump to heading

Link Buttons Jump to heading

Setting a Custom Width Jump to heading

Prefix and Suffix Icons Jump to heading

Caret Jump to heading

Loading Jump to heading

Disabled Jump to heading

Styling Buttons Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading

Getting Started

Resources

Button

Examples Jump to heading #

Variants Jump to heading #

Appearance Jump to heading #

Sizes Jump to heading #

Pill Buttons Jump to heading #

Link Buttons Jump to heading #

Setting a Custom Width Jump to heading #

Prefix and Suffix Icons Jump to heading #

Caret Jump to heading #

Loading Jump to heading #

Disabled Jump to heading #

Styling Buttons Jump to heading #

Slots Jump to heading #

Attributes & Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Dependencies Jump to heading #

Importing Jump to heading #

Examples Jump to heading

Variants Jump to heading

Appearance Jump to heading

Sizes Jump to heading

Pill Buttons Jump to heading

Link Buttons Jump to heading

Setting a Custom Width Jump to heading

Prefix and Suffix Icons Jump to heading

Caret Jump to heading

Loading Jump to heading

Disabled Jump to heading

Styling Buttons Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Importing Jump to heading