Sponsor

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.

Import#

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

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

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	Default	Description
`aria-label`	`string`		An accessible label for the close button
`isDisabled`	`boolean`		If `true`, the button will be disabled
`color`	`string`		The color of the close icon
`size`	`sm`, `md`, `lg`	`md`	The size of the close button

Edit this page