Close Button

Used to trigger close functionality

AI TipWant to skip the docs? Use the MCP Server

Usage

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

<CloseButton />

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

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

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

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.