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/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.

`colorScheme`

Description

Color Schemes for CloseButton are not implemented in the default theme. You can extend the theme to implement them.

Type

string

`isDisabled`

Description

If true, the close button will be disabled.

Type

boolean

`size`

Type

string

Default

"md"

`variant`

Type

string