# swc-infield-button

A compact icon button embedded inside a form field (e.g. number field increment/decrement control, search field clear button). Clickable via pointer only; not in the tab order.

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

## Attributes

| Name               | Type                  | Default | Description                                                                                                                                |
| ------------------ | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `size`             | `ElementSize`         | -       | Size delegated from the parent field. Defaults to medium when no parent sets it, though standalone usage is not supported.                 |
| `quiet`            | `boolean`             | `false` | Applies the quiet (no-background) visual treatment. Used when the infield button is part of a quiet field variant.                         |
| `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                        |
| ------ | ---------------------------------- |
| `icon` | Icon to display inside the button. |

## CSS Custom Properties

| Name                                             | Description                                                                                                                                                                                         |
| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--swc-infield-button-padding`                   | Padding applied to all four sides of the button. Determines the visible button size together with the icon.                                                                                         |
| `--swc-infield-button-icon-size`                 | Size of the slotted icon element. Defaults to `workflow-icon-3x-small` (10px) for sizes S and M. Overridden to `workflow-icon-2x-small` (12px) for L and `workflow-icon-extra-small` (14px) for XL. |
| `--swc-infield-button-background-color`          | Background color in the default state. Defaults to `token("gray-100")`. Overridden to `transparent` by `[quiet]`.                                                                                   |
| `--swc-infield-button-background-color-hover`    | Background color on hover. Defaults to `token("gray-200")`. Overridden to `transparent` by `[quiet]`.                                                                                               |
| `--swc-infield-button-background-color-active`   | Background color on press. Defaults to `token("gray-200")`. Overridden to `transparent` by `[quiet]`.                                                                                               |
| `--swc-infield-button-background-color-focus`    | Background color when focused. Defaults to `token("gray-200")`. Overridden to `transparent` by `[quiet]`.                                                                                           |
| `--swc-infield-button-background-color-disabled` | Background color when disabled. Defaults to `token("disabled-background-color")`. Overridden to `transparent` by `[quiet]`.                                                                         |
| `--swc-infield-button-icon-color`                | Icon color in the default state. Defaults to `token("neutral-content-color-default")`.                                                                                                              |
| `--swc-infield-button-icon-color-hover`          | Icon color on hover. Defaults to `token("neutral-content-color-hover")`.                                                                                                                            |
| `--swc-infield-button-icon-color-active`         | Icon color on press. Defaults to `token("neutral-content-color-down")`.                                                                                                                             |
| `--swc-infield-button-icon-color-focus`          | Icon color when focused. Defaults to `token("neutral-content-color-key-focus")`.                                                                                                                    |
| `--swc-infield-button-icon-color-disabled`       | Icon color when disabled. Defaults to `token("disabled-content-color")`.                                                                                                                            |
| `--swc-infield-button-down-state-transform`      | CSS transform applied on press. Defaults to `perspective(…) translate3d(0,0,token("component-size-difference-down"))`. Set to `none` to disable the press animation.                                |