Close Button

Used to trigger close functionality

import { CloseButton } from "@chakra-ui/react"

const Demo = () => {
  return <CloseButton />
}

Usage

import { CloseButton } from "@chakra-ui/react"

<CloseButton />

Examples

Sizes

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

import { CloseButton, For, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack gap="4" wrap="wrap">
      <For each={["2xs", "xs", "sm", "md", "lg", "xl"]}>
        {(size) => <CloseButton variant="outline" size={size} />}
      </For>
    </HStack>
  )
}

Variants

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

import { CloseButton, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <CloseButton variant="ghost" />
      <CloseButton variant="outline" />
      <CloseButton variant="subtle" />
      <CloseButton variant="solid" />
    </HStack>
  )
}

Custom Icon

Pass the custom icon to the children of the CloseButton component.

import { CloseButton } from "@chakra-ui/react"
import { HiX } from "react-icons/hi"

const Demo = () => {
  return (
    <CloseButton variant="ghost" aria-label="Close">
      <HiX />
    </CloseButton>
  )
}

Props

Prop	Default	Type
`spinnerPlacement`	`'start'`	`'start' \| 'end' \| undefined` The placement of the spinner
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` The size of the component
`variant`	`'solid'`	`'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'` The variant of the component
`loading`		`boolean \| undefined` If `true`, the button will show a loading spinner.
`loadingText`		`React.ReactNode \| undefined` The text to show while loading.
`spinner`		`React.ReactNode \| undefined` The spinner to show while loading.
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Clipboard

Collapsible