# Close button

The round × that dismisses a panel, a card or a notice, named "Close" from the provider.

- **Import:** `import { CloseButton } from "@booleanpress/ui/close-button"`
- **APG Button:** <https://www.w3.org/WAI/ARIA/apg/patterns/button/>
- **Page:** <https://ui.booleanpress.com/components/close-button> · @booleanpress/ui 0.2.0

## Usage

`CloseButton` is the × Dialog and Sheet draw in their corner, for your own panels: round, muted grey, the faintest surface on hover.

```tsx
import { CloseButton } from "@booleanpress/ui/close-button"

export function Notice({ onDismiss }: { onDismiss: () => void }) {
  return (
    <section className="relative rounded-xl border p-4 pe-14">
      DKIM is not set up.
      <CloseButton className="absolute end-3 top-3" onClick={onDismiss} />
    </section>
  )
}
```

Its name is the provider's `close` string; pass `label` when "Close" alone is unclear ("Dismiss the DKIM notice"). `size` is `sm` 28 px, `default` 36 px or `lg` 42 px, with a 12, 14 or 16 px ×; left out, it follows the provider's `controlSize`. Put it inside a Radix close part with `asChild` (`<PopoverClose asChild><CloseButton /></PopoverClose>`). Leave room for it: pad the panel's inline end so text does not run under it.

## Examples

### Basic

The 36 px round ×, named "Close".

```tsx
import { CloseButton } from "@booleanpress/ui/close-button"

export default function CloseButtonBasic() {
  return <CloseButton />
}
```

### Sizes

`sm`, `default` and `lg`: 28, 36 and 42 px.

```tsx
import { CloseButton } from "@booleanpress/ui/close-button"

export default function CloseButtonSizes() {
  return (
    <div className="flex items-center gap-2">
      <CloseButton size="sm" />
      <CloseButton />
      <CloseButton size="lg" />
    </div>
  )
}
```

### In a card corner

Dismisses a notice; `label` names what it closes.

```tsx
import * as React from "react"
import { Button } from "@booleanpress/ui/button"
import { CloseButton } from "@booleanpress/ui/close-button"

export default function CloseButtonInACard() {
  const [shown, setShown] = React.useState(true)

  if (!shown) {
    return (
      <Button variant="outline" onClick={() => setShown(true)}>
        Show the notice again
      </Button>
    )
  }

  return (
    <section aria-labelledby="dkim-title" className="relative w-full max-w-sm rounded-xl border bg-card p-4 pe-14 shadow-sm">
      <h3 id="dkim-title" className="font-semibold">
        DKIM is not set up
      </h3>
      <p className="mt-1 text-sm text-muted-foreground">
        Add the DKIM record to your domain so receiving servers trust mail from this mailer.
      </p>
      <CloseButton label="Dismiss the DKIM notice" size="sm" className="absolute end-3 top-3" onClick={() => setShown(false)} />
    </section>
  )
}
```

### Disabled

`disabled` dims the button and stops it from being activated.

```tsx
import { CloseButton } from "@booleanpress/ui/close-button"

export default function CloseButtonDisabled() {
  return <CloseButton disabled />
}
```

## Accessibility

**Semantics.** A native `button` with `type="button"`; the × icon is hidden from assistive technology.

**Labels.** Named by `aria-label`: the provider's `close` string, or `label`.

**Focus.** It is in the tab order and shows the focus outline on keyboard focus. When it removes the panel it sits in, move focus somewhere sensible (the element that opened the panel, or the next item).

### Keyboard

| Key | Behaviour |
| --- | --- |
| Enter | Activates the button. |
| Space | Activates the button. |

## API

### CloseButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` |  |  |
| `label` | `string` |  | Its accessible name, when "Close" is not precise enough ("Dismiss the notice"). The provider's `close` string by default. |
| `loading` | `boolean` |  | Shows the spinner in place of the leading icon, sets `aria-busy` and `aria-disabled` and ignores presses (a click, Enter, Space, a form's submission), while the button keeps its focus and its place in the tab order. With `asChild` the child (a link) gets the same. |
| `raised` | `boolean \| null` |  |  |
| `size` | `"default" \| "sm" \| "lg"` |  | 28 px `sm`, 36 px `default`, 42 px `lg`. The provider's `controlSize` when left out. |

Every part takes `className`, merged with its defaults by `cn()`, and `ref`, which reaches the element it renders.

**Data attributes:** `data-slot="close-button"` (CloseButton).

**Provider strings:** `close` (`BooleanUIProvider`'s `strings`).

## Theming

| Token | Used for |
| --- | --- |
| `--accent` | background |
| `--muted-foreground` | text |
| `--subtle` | background |