---
outline: deep
---

# Close button

Close buttons are used to dismiss overlays such as dialogs, drawers, toasts, and popovers. They render a close icon without any visible label.

**`.l-close`** — Native HTML Element

## Options

### Appearance

Pick a visual style via `data-appearance`. Each appearance has its own CSS import.

#### Ring

```html
<button
  type="button"
  class="l-close"
  data-appearance="ring"
  aria-label="Close"
></button>
```

```css
@import 'luxen-ui/css/close-button/ring';
```

#### Square

```html
<button
  type="button"
  class="l-close"
  data-appearance="square"
  aria-label="Close"
></button>
```

```css
@import 'luxen-ui/css/close-button/square';
```

#### Circle

```html
<button
  type="button"
  class="l-close"
  data-appearance="circle"
  aria-label="Close"
></button>
```

```css
@import 'luxen-ui/css/close-button/circle';
```

## Accessibility

### Criteria

- **Color** — Icon and background colors meet AA contrast ratios
- **Size** — Minimum 24×24px target size; larger for touch contexts
- **Icon** — Decorative icon; `aria-label` on the button provides the accessible name
- **Hover state** — Clear visual change on hover
- **Focus state** — Visible focus ring for keyboard users
- **Active state** — Visual feedback on press
- **Disabled state** — Appears inactive, not focusable when disabled
- **Accessible name** — Always provide `aria-label` or context-specific label
- **Role** — Uses native `<button>` — no extra ARIA role needed

### Rules

- Always add `aria-label="Close"` (or a context-specific label like `aria-label="Close dialog"`)
- Use a native `<button>` element — never a `<div>` or `<span>`
- Include `type="button"` to prevent form submission

### Keyboard interactions

- `Enter` — Activates the close button
- `Space` — Activates the close button
- `Tab` — Moves focus to the next focusable element
- `Shift + Tab` — Moves focus to the previous focusable element

## API reference

### Importing

```css
@import 'luxen-ui/css/close-button/ring';
```

### Attributes & Properties

- **data-appearance**: `ring | square | circle` — Visual appearance (matches the imported appearance CSS).
- **command** — Invoker command (typically `close`).
- **commandfor** — ID of the target element to close.

### CSS classes

- `.l-close` — Base close button with X icon via CSS mask.

### CSS custom properties

- `--size` (default: `36px`) — Button size.
- `--icon-color` — Icon color.
- `--icon-size` (default: `24px`) — Icon size.
- `--ring-color` — Hover ring color (`ring` appearance only).
- `--ring-tickness` — Hover ring thickness (`ring` appearance only).