---
url: /api/css/close-button.md
---
# CSS: close-button

`.instui-close-button` — A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.

Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.

**Source:** [close-button.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/components/close-button/close-button.css)

> \[!TIP]
> **JS Enhancement** — This component's CSS renders and works on its own; pair it with `@pantoken/interactions` to add the interactive behavior. See the [modifier table below](#modifiers).

## Accessibility

Give the icon-only button an `aria-label` (e.g. "Close"), and mark a disabled button with `aria-disabled` (or the native `disabled`).

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/close-button.css";
```

## Examples

```html
<button class="instui-close-button -size-sm" aria-label="Close"></button>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-color-inverse` | Deprecated — use `.-on-color`. |
| `.-on-color` | For a close button placed on a coloured (non-neutral) surface. |
| `.-size-large` | Large. Long-form alias of `-size-lg`. |
| `.-size-lg` | Large. |
| `.-size-md` | (default) medium size. |
| `.-size-medium` | (default) medium size. Long-form alias of `-size-md`. |
| `.-size-sm` | Small. |
| `.-size-small` | Small. Long-form alias of `-size-sm`. |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::before` | The × glyph, masked in `currentColor`. |

## States

| State | Description |
| --- | --- |
| `[aria-disabled="true"]` | — |
| `:disabled` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-base-button-border-radius` | `<length>` | `0.75rem` |
| `--instui-component-base-button-large-height` | `<length>` | `3rem` |
| `--instui-component-base-button-medium-height` | `<length>` | `2.5rem` |
| `--instui-component-base-button-primary-ghost-active-background` | — | `color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)` |
| `--instui-component-base-button-primary-ghost-hover-background` | — | `color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)` |
| `--instui-component-base-button-primary-inverse-ghost-active-background` | `<color>` | `rgba(255,255,255,0.1)` |
| `--instui-component-base-button-primary-inverse-ghost-hover-background` | `<color>` | `rgba(255,255,255,0.1)` |
| `--instui-component-base-button-small-height` | `<length>` | `2rem` |
| `--instui-component-icon-base-color` | `<color>` | `light-dark(#273540, #ffffff)` |
| `--instui-component-icon-disabled-base-color` | `<color>` | `light-dark(#8D959F, #576773)` |
| `--instui-component-icon-disabled-on-color` | `<color>` | `light-dark(#C7CACD, #9EA6AD)` |
| `--instui-component-icon-on-color` | `<color>` | `#ffffff` |
| `--instui-icon-x` | `<image>` | `url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')` |
| `--instui-spacing-space-xs` | `<length>` | `0.25rem` |

## Related

* [button](/api/css/button.md) — The general-purpose action button.