Close Button

CloseButton is essentially a button with a close icon. It is used to trigger close functionality in components.

View sourceView theme source@chakra-ui/close-button

Import

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

Usage

<CloseButton />

<CloseButton />

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>

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

"lg" | "md" | "sm"

Default

"md"

variant

Description

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

Type

string