Close Button

A button used to close modals, drawers, alerts, and other dismissible elements.

import { CloseButton as FidelyCloseButton } from '@fidely-ui/react/close-button'

export const CloseButton = () => {
  return <FidelyCloseButton />
}

Usage

import { CloseButton } from '@fidely-ui/react'

<CloseButton />

The CloseButton component inherits all props available in the Button component.

<CloseButton>
  <YourCustomIcon />
</CloseButton>

Prop	Type	Default	Description
`size`	`"2xs" \|` "xs" \| "sm" \| "md" \| `"lg" \| "md" \| "lg"` \| `"xl"` \| `"2xl"`	Defines the size of the close button.
`colorPalette`	`"gray" \| "red" \| "blue" \| "green" \| "purple" \| "orange"`	`"gray"`	Sets the color palette for the button.
`variant`	`"solid" \| "subtle" \| "outline" \| "ghost"`	`"ghost"`	Defines the visual style of the button.
`childeren`	`ReactNode`	`<XIcon />`	The icon displayed inside the button. Defaults to a close (×) icon.
`aria-label`	`string`	`"Close"`	Accessible label for screen readers.
`onClick`	`() => void`	`-`	Called when the close button is clicked.
`disabled`	`boolean`	`false`	Disables the button when set to true.
`asChild`	`boolean`	`false`	Passes props to a custom element instead of rendering a default `<button>`.