Close Button

<CloseButton />

Usage

import { CloseButton } from "@reva/ui";

<CloseButton onClick={() => setOpen(false)} />

Examples

Defaults

CloseButton uses variant="ghost", aria-label="Close", and a Phosphor X icon when you omit icon.

<CloseButton />

Size and variant

CloseButton accepts the same size and variant props as IconButton.

<CloseButton size="sm" /><CloseButton size="sm" variant="outline" /><CloseButton size="sm" variant="secondary" /><CloseButton size="sm" variant="default" /><CloseButton size="sm" variant="destructive" />

Custom label

Override aria-label for i18n or when the action is not a generic "close".

<CloseButton aria-label="Dismiss notification" />

Custom icon

Pass icon to replace the default X — keeps usage on one line with no children.

<CloseButton size="lg" icon={<XCircle />} aria-label="Back" />

Accessibility

Icon-only controls need a clear name. The default aria-label="Close" covers the common case; override it when localising or when the control does not dismiss content (see examples above).

Props

CloseButtonProps matches IconButtonProps except children and asChild are not used — use icon for a custom glyph. Everything else applies (size, variant, className, native button attributes, etc.). Defaults: variant="ghost", aria-label="Close", and Phosphor X icon when icon is omitted.

For asChild or full composition control, use IconButton directly.

See the Icon Button page in this section for semantic sizes and shared behaviour.