## Overview An `` represents an action a user can take. ### Usage [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-button) [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button) [![Try it on Stackblitz](https://img.shields.io/badge/Try%20it%20on-Stackblitz-blue?style=for-the-badge)](https://stackblitz.com/edit/vitejs-vite-alf1ticu) ```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'; ``` ### Anatomy ```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 SVG Icon + Label ```

Icon only

```html demo

```

### Options #### Sizes

Extra Small

```html demo

Edit

```

Small

```html demo

Edit

```

Medium

```html demo

Edit

```

Large

```html demo

Edit

```

Extra Large

```html demo

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

Default

Edit

Selected

Edit

Disabled

Edit

Disabled + Selected

Edit

```

Quiet

```html demo

Default

Edit

Selected

Edit

Disabled

Edit

Disabled + Selected

Edit

```

Emphasized

```html demo

Default

Edit

Selected

Edit

Disabled

Edit

Disabled + Selected

Edit

```

Emphasized + quiet

```html demo

Default

Edit

Selected

Edit

Disabled

Edit

Disabled + Selected

Edit

```

### Behaviors #### Action button with hold affordance The use of the `hold-affordance` attribute signifies that the `` in question will be delivered with a visual affordance outlining that special interaction with the button will dispatch a `longpress` event. Via a pointer input, this even will be dispatched when 300ms has passed after a `pointerdown` event without the presence of a `pointerup` or `pointercancel` event. Via the keyboard, an event with a code of `Space` or or `ArrowDown` while `altKey === true` will dispatch the event. ```html demo

This content is triggered by the "longpress" interaction.

Show Longpress Content

This content is triggered by the "longpress" interaction.

Extended Content with Longpress

This content is triggered by the "longpress" interaction.

``` #### Toggles With the application of the `toggles` attribute, the button will self manage its `selected` property on `click`. When this value is updated, a cancellable `change` event will be dispatched to inform the parent application.

Default

```html demo Toggle button Toggle button ```

Quiet

```html demo Toggle button Toggle button ```

Emphasized

```html demo Toggle button Toggle button ```

Emphasized + Quiet

```html demo Toggle button Toggle button ```

#### Handling events Events handlers for clicks and other user actions can be registered on a `` as on a standard HTML `