# swc-button

A button component that triggers an action when activated.

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

## Attributes

| Name               | Type                             | Default     | Description                                                                                                                                                                          |
| ------------------ | -------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `variant`          | `ButtonVariant`                  | `'primary'` | The visual variant of the button. `outline` fill-style is only supported with `primary` and `secondary`. `static-color` is only supported with `primary` and `secondary`.            |
| `fill-style`       | `ButtonFillStyle`                | `'fill'`    | The fill style of the button. `outline` is only supported with `primary` and `secondary` variants.                                                                                   |
| `static-color`     | `ButtonStaticColor \| undefined` | -           | Static color treatment for display over colored or image backgrounds. Only supported with `primary` and `secondary` variants.                                                        |
| `truncate`         | `boolean`                        | `false`     | Whether overflowing text is truncated with an ellipsis rather than wrapping. Replaces the legacy `no-wrap` attribute from 1st-gen.                                                   |
| `justified`        | `boolean`                        | `false`     | Enables the button to become full-width, if the container allows it.                                                                                                                 |
| `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`      | Leading icon displayed before the label. |

## CSS Custom Properties

| Name                                     | Description                                                                                                                  |
| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `--swc-button-min-block-size`            | Minimum block size of the button.                                                                                            |
| `--swc-button-max-inline-size`           | Maximum inline size of the button. Defaults to `inherit` to support truncation.                                              |
| `--swc-button-border-radius`             | Corner radius. Defaults to half the height (pill shape).                                                                     |
| `--swc-button-padding-vertical`          | Block padding (adjusted for border width).                                                                                   |
| `--swc-button-edge-to-text`              | Inline padding from edge to text.                                                                                            |
| `--swc-button-edge-to-visual`            | Inline padding from edge to icon when label is also present.                                                                 |
| `--swc-button-edge-to-visual-only`       | Inline padding from edge to icon when no label is present.                                                                   |
| `--swc-button-font-size`                 | Font size of the button label.                                                                                               |
| `--swc-button-gap`                       | Gap between icon and label.                                                                                                  |
| `--swc-button-icon-size`                 | Size (inline and block) of the slotted icon.                                                                                 |
| `--swc-button-icon-inline-size`          | Inline size override for the slotted icon.                                                                                   |
| `--swc-button-icon-block-size`           | Block size override for the slotted icon.                                                                                    |
| `--swc-button-focus-indicator-color`     | Color of the focus ring outline.                                                                                             |
| `--swc-button-background-color-default`  | Background color in the default state.                                                                                       |
| `--swc-button-border-color-default`      | Border color in the default state.                                                                                           |
| `--swc-button-content-color-default`     | Text and icon color in the default state.                                                                                    |
| `--swc-button-background-color-hover`    | Background color on hover.                                                                                                   |
| `--swc-button-border-color-hover`        | Border color on hover.                                                                                                       |
| `--swc-button-content-color-hover`       | Text and icon color on hover.                                                                                                |
| `--swc-button-background-color-focus`    | Background color when focused.                                                                                               |
| `--swc-button-border-color-focus`        | Border color when focused.                                                                                                   |
| `--swc-button-content-color-focus`       | Text and icon color when focused.                                                                                            |
| `--swc-button-background-color-down`     | Background color when pressed.                                                                                               |
| `--swc-button-border-color-down`         | Border color when pressed.                                                                                                   |
| `--swc-button-content-color-down`        | Text and icon color when pressed.                                                                                            |
| `--swc-button-down-state-transform`      | Transform applied to the button when pressed. Set to `none` to disable the press animation.                                  |
| `--swc-button-background-color-disabled` | Background color when disabled or pending.                                                                                   |
| `--swc-button-border-color-disabled`     | Border color when disabled or pending.                                                                                       |
| `--swc-button-content-color-disabled`    | Text and icon color when disabled or pending.                                                                                |
| `--swc-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. |