Close Button | Park UI

Installation

npx @park-ui/cli@next add close-button

Add Component

Copy the code snippet below into you components folder.

import { XIcon } from 'lucide-react'
import { forwardRef } from 'react'
import { IconButton, type IconButtonProps } from './icon-button'

export type CloseButtonProps = IconButtonProps

export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
  function CloseButton(props, ref) {
    return (
      <IconButton variant="plain" colorPalette="gray" aria-label="Close" ref={ref} {...props}>
        {props.children ?? <XIcon />}
      </IconButton>
    )
  },
)

Integrate Recipe

Integrate this recipe in to your Panda config.

Usage

import { CloseButton } from '@/components/ui'

<CloseButton />

Examples

Sizes

Use the size prop to change the size of the close button.

Variants

Use the variant prop to change the appearance of the close button.

Custom Icon

Pass the custom icon to the children of the close button component.

Props

Prop	Default	Type
`variant`	`'solid'`	`'solid' \| 'surface' \| 'subtle' \| 'outline' \| 'plain'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`