CloseButton

CloseButton is essentially a button with a close icon. It is used to handle the close functionality in feedback and overlay components like Alerts, Toasts, Drawers and Modals.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

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

Usage#

<CloseButton />

<CloseButton />

Editable Example

Button Size#

Pass the size prop to adjust the size of the close button. Values can be sm, md or lg.

<Stack direction="row" spacing={6}>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</Stack>

<Stack direction="row" spacing={6}>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</Stack>

Editable Example

Props#

The CloseButton composes Box component.

Name	Type	Description	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`	Color Schemes for `CloseButton` are not implemented in the default theme. You can extend the theme to implement them.	-
isDisabled	`boolean`	If `true`, the close button will be disabled.	-
size	`"sm" \| "md" \| "lg"`		`"md"`
variant	`string`	Variants for `CloseButton` are not implemented in the default theme. You can extend the theme to implement them.	-

Edit this page