Close Button

Small icon button that closes a dialog, panel or banner (labelled "Close").

Import

import { CloseButton } from '@marbleui/ui'

Props

<CloseButton>

Prop	Type	Default
aria-label	`string`	`—`
shape	`'circle' \| 'square'`	`—`
size	`'sm' \| 'md' \| 'lg'`	`'sm'`
variant	`'soft' \| 'outline' \| 'danger' \| 'solid' \| 'ghost'`	`—`

Also accepts React Aria props (111).

Usage notes

Small icon button that dismisses a dialog, banner or panel. For any other icon-only action use IconButton; for a text action use Button.

<CloseButton onPress={() => setOpen(false)} />
<CloseButton variant="soft" shape="circle" size="md" aria-label="Dismiss banner" />

Takes the IconButton props (variant, size, shape, onPress) except children; the X icon is built in. size defaults to sm.
aria-label defaults to “Close”. Override it when the context needs a more specific name, such as “Dismiss banner”.
Has no state of its own: you decide what closing means in onPress.

Example source · show

import { CloseButton } from './close-button'

export const styles = {
  Ghost: () => (
    <div className="flex items-center gap-2">
      <CloseButton size="sm" />
      <CloseButton size="md" />
      <CloseButton size="md" shape="circle" />
    </div>
  ),
  Soft: () => (
    <div className="flex items-center gap-2">
      <CloseButton variant="soft" shape="circle" />
      <CloseButton variant="outline" />
    </div>
  ),
}

Source: packages/ui/src/close-button/close-button.tsx

Catalog