# swc-action-button

A compact action button for toolbars, action groups, and icon-first chrome.

```js
import '@adobe/spectrum-wc/components/action-button/index.js';
// <swc-action-button></swc-action-button>
```

## Attributes

| Name               | Type                                   | Default | Description                                                                                                                                                                          |
| ------------------ | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `aria-haspopup`    |                                        | -       |                                                                                                                                                                                      |
| `aria-expanded`    |                                        | -       |                                                                                                                                                                                      |
| `aria-disabled`    |                                        | -       |                                                                                                                                                                                      |
| `quiet`            | `boolean`                              | `false` | Applies the quiet (low-emphasis) visual treatment.                                                                                                                                   |
| `static-color`     | `ActionButtonStaticColor \| undefined` | -       | Static color treatment for display over colored or image backgrounds.                                                                                                                |
| `pending`          | `boolean`                              | `false` | Whether the element is in a pending (busy) state. The element remains focusable but activation is suppressed.                                                                        |
| `pending-label`    | `string \| undefined`                  | -       | Custom accessible label used during the pending state. When omitted, the pending label is derived from the resolved non-busy accessible name plus a busy suffix (e.g. "Save, busy"). |
| `size`             | `ElementSize`                          | -       | The size of the button.                                                                                                                                                              |
| `disabled`         | `boolean`                              | `false` | Whether the button is disabled. Removes focusability and prevents interaction.                                                                                                       |
| `accessible-label` | `string \| undefined`                  | -       | Accessible label forwarded to the internal `<button>` element as `aria-label`. Required for icon-only buttons, which have no visible text.                                           |

## Slots

| Name        | Description                                       |
| ----------- | ------------------------------------------------- |
| `(default)` | Visible button label.                             |
| `icon`      | Optional leading icon displayed before the label. |

## CSS Custom Properties

| Name                                            | Description                                                                                                                  |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `--swc-action-button-min-block-size`            | Minimum block size. Defaults to the medium component height token.                                                           |
| `--swc-action-button-border-radius`             | Corner radius applied to all four corners. Defaults to `corner-radius-medium-size-medium`.                                   |
| `--swc-action-button-border-start-start-radius` | Start-start corner radius override. Defaults to `--swc-action-button-border-radius`.                                         |
| `--swc-action-button-border-start-end-radius`   | Start-end corner radius override. Defaults to `--swc-action-button-border-radius`.                                           |
| `--swc-action-button-border-end-start-radius`   | End-start corner radius override. Defaults to `--swc-action-button-border-radius`.                                           |
| `--swc-action-button-border-end-end-radius`     | End-end corner radius override. Defaults to `--swc-action-button-border-radius`.                                             |
| `--swc-action-button-font-size`                 | Font size of the label. Defaults to the medium font-size token.                                                              |
| `--swc-action-button-gap`                       | Gap between icon and label.                                                                                                  |
| `--swc-action-button-edge-to-text`              | Inline padding from edge to label text.                                                                                      |
| `--swc-action-button-edge-to-visual`            | Inline padding from edge to icon when a label is also present.                                                               |
| `--swc-action-button-edge-to-visual-only`       | Inline padding from edge to icon when no label is present.                                                                   |
| `--swc-action-button-icon-size`                 | Size (inline and block) of the slotted icon.                                                                                 |
| `--swc-action-button-icon-inline-size`          | Inline size override for the slotted icon.                                                                                   |
| `--swc-action-button-icon-block-size`           | Block size override for the slotted icon.                                                                                    |
| `--swc-action-button-focus-indicator-color`     | Color of the focus ring outline.                                                                                             |
| `--swc-action-button-background-color-default`  | Background color in the default state.                                                                                       |
| `--swc-action-button-border-color-default`      | Border color in the default state.                                                                                           |
| `--swc-action-button-content-color-default`     | Text and icon color in the default state.                                                                                    |
| `--swc-action-button-background-color-hover`    | Background color on hover.                                                                                                   |
| `--swc-action-button-border-color-hover`        | Border color on hover.                                                                                                       |
| `--swc-action-button-content-color-hover`       | Text and icon color on hover.                                                                                                |
| `--swc-action-button-background-color-focus`    | Background color when focused.                                                                                               |
| `--swc-action-button-border-color-focus`        | Border color when focused.                                                                                                   |
| `--swc-action-button-content-color-focus`       | Text and icon color when focused.                                                                                            |
| `--swc-action-button-background-color-down`     | Background color when pressed.                                                                                               |
| `--swc-action-button-border-color-down`         | Border color when pressed.                                                                                                   |
| `--swc-action-button-content-color-down`        | Text and icon color when pressed.                                                                                            |
| `--swc-action-button-background-color-disabled` | Background color when disabled or pending.                                                                                   |
| `--swc-action-button-border-color-disabled`     | Border color when disabled or pending.                                                                                       |
| `--swc-action-button-content-color-disabled`    | Text and icon color when disabled or pending.                                                                                |
| `--swc-action-button-down-state-transform`      | Transform applied to the button in the pressed (down) state. Defaults to a scale/translate effect; set to `none` to disable. |