ComponentsButton

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"

Usage

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

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".

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

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

Sizes

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

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.

DKIM is not set up

Add the DKIM record to your domain so receiving servers trust mail from this mailer.

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.

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

Keyboard
Key	Behaviour
`Enter`	Activates the button.
`Space`	Activates the button.

API

CloseButton

CloseButton props
Prop	Type	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

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
Token	Used for
`--accent`	background
`--muted-foreground`	text
`--subtle`	background