Close Button

Description

CloseButton is a small, square <button> pre-wired with the close icon and an automatic aria-label="Close". It is a single-element component; pass asChild to render it through Radix Slot when you need a different host element (a link, a custom trigger).

Reach for it whenever a surface can be dismissed: the corner of a dialog, the trailing slot of a toast, the top-right of an inline alert or banner, the dismissal control inside a drawer or popover. The visual weight is deliberately low so the close affordance never competes with the content it sits next to.

Don't use CloseButton for generic actions. If the control triggers anything other than "dismiss this surface", use Button. For an action that needs a text label (Cancel, Close, Dismiss), prefer Button with a leading icon so the label is part of the hit target. For non-interactive status pills use Badge.

Installation

pnpm dlx @create-ui/cli add close-button

Usage

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

<CloseButton />

Examples

Variants

variant picks the color treatment. neutral (default) sits on light surfaces; inverse is tuned for dark surfaces such as overlays, marketing sections, and dark dialogs.

Appearance

appearance controls fill weight. ghost (default) is the quietest and works in tight corners; soft lifts the button onto a subtle backdrop; outline adds a hairline border; solid is the high-contrast option for surfaces where the close affordance must read at a glance.

Sizes

Six sizes (xs, sm, md (default), lg, xl, 2xl) match the surrounding type scale. Pick sm or md for inline use inside cards and toasts; reach for lg+ when the close button anchors a hero overlay.

Shape

shape="rounded" (default) follows the size-aware radius scale, pill is fully rounded, square strips the radius for grid layouts and dense toolbars.

States

disabled mutes the button and disables pointer events. Use it when a dismissal must remain visible but is temporarily unavailable (e.g. during an in-flight save).

Composition

InlineAlert already wires a CloseButton into its top-right corner via InlineAlertClose. Compose with it directly instead of laying out a custom dismissable panel.

Accessibility

CloseButton renders as a native <button type="button">, so all standard button keyboard semantics apply.

ARIA notes:

• The component sets aria-label="Close" automatically so screen readers always announce the control even though it has no visible label.
• Override aria-label (or pass aria-labelledby) when the surrounding context calls for a more specific verb (e.g. aria-label="Dismiss notification" inside a toast).
• When asChild is used, the rendered element receives the props but you are responsible for keeping an accessible name on it.
• disabled removes the button from the tab order and disables pointer events; pair it with a tooltip if you need to explain why the dismissal is unavailable.

Styling

Tailwind override: pass className to merge Tailwind classes with the component's CVA classes (via cn()):

<CloseButton className="shadow-neutral-xs" />

Data slots and attributes: the component sets these for CSS targeting:

• data-slot="close-button" on the root element.
• data-variant="<variant>", data-appearance="<appearance>", data-size="<size>" on the root.

Target a specific state in CSS:

[data-slot="close-button"][data-variant="inverse"][data-appearance="soft"] {
  /* … */
}

Related Components

• Button: use this whenever the control does anything other than dismiss the surrounding surface.
• InlineAlert: already wires a CloseButton into its corner via InlineAlertClose; reach for it instead of composing one by hand.
• Toast: uses CloseButton internally for the trailing dismiss slot.
• Dialog: pair CloseButton with Dialog.Close for the top-right close affordance.

API Reference

CloseButton

Compact icon button for dismissing dialogs, toasts, banners, and other overlays. Extends React.ComponentProps<"button">, so any standard button attribute (id, onClick, aria-*, form, etc.) is accepted.

Props

Variants