@spectrum-web-components/action-button

Overview

An represents an action a user can take.

$3


``bash
yarn add @spectrum-web-components/action-button
`

Import the side effectful registration of via:

`ts
import '@spectrum-web-components/action-button/sp-action-button.js';
`

When looking to leverage the ActionButton base class as a type and/or for extension purposes, do so via:

`ts
import { ActionButton } from '@spectrum-web-components/action-button';
`

$3

`html
Try me
`

#### Content

elements can be provided a visible label,
a label and an icon, or just an icon.

An icon is provided by placing an icon element in the icon slot.

If the button is icon-only, a non-visible label
can be provided via the label attribute on an
or on an element child to appropriately
fulfill the accessibility contract of the button.


Label only


`html demo
Label only
`


Icon + label


`html demo


Icon + Label

`


SVG Icon + label


`html demo

slot="icon"
viewBox="0 0 36 36"
focusable="false"
aria-hidden="true"
role="img"
>
d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
>

SVG Icon + Label

`


Icon only


`html demo



`

$3

#### Sizes


Extra Small


`html demo

Edit


Edit








`


Small


`html demo

Edit


Edit








`


Medium


`html demo

Edit


Edit








`


Large


`html demo

Edit


Edit








`


Extra Large


`html demo

Edit


Edit








`

#### Variants

The can be customized with either or both of the emphasized and quiet attributes. These will pair with either or both of the state attributes (selected and disabled) to decide the final visual delivery of the . Content addressed to the icon slot can also be provided and will be positioned just before the rest of the the supplied button content.


Default


`html demo
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
>