# swc-close-button

A compact dismiss control for dialogs, banners, toasts, and similar chrome. Renders a native `<button type="button">` with delegated focus.

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

## Attributes

| Name               | Type                             | Default | Description                                                                                                                                |
| ------------------ | -------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `static-color`     | `ButtonStaticColor \| undefined` | -       | Static color treatment for display over colored or image backgrounds.                                                                      |
| `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. |

## CSS Custom Properties

| Name                                          | Description                                                                               |
| --------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `--swc-close-button-size`                     | Inline and block size of the close button. Defaults to the medium component height token. |
| `--swc-close-button-icon-size`                | Size of the cross icon. Defaults to the medium cross icon token.                          |
| `--swc-close-button-icon-color-default`       | Cross icon color in the default state.                                                    |
| `--swc-close-button-icon-color-hover`         | Cross icon color when hovered.                                                            |
| `--swc-close-button-icon-color-down`          | Cross icon color when pressed.                                                            |
| `--swc-close-button-icon-color-focus`         | Cross icon color when keyboard focused.                                                   |
| `--swc-close-button-icon-color-disabled`      | Cross icon color when disabled.                                                           |
| `--swc-close-button-background-color-default` | Background color in the default state.                                                    |
| `--swc-close-button-background-color-hover`   | Background color when hovered.                                                            |
| `--swc-close-button-background-color-down`    | Background color when pressed.                                                            |
| `--swc-close-button-background-color-focus`   | Background color when keyboard focused.                                                   |
| `--swc-close-button-focus-indicator-color`    | Focus ring color. Defaults to the focus indicator color token.                            |