The visual color appearance of the component
Close Button
CloseButton is essentially a button with a close icon. It is used to trigger close functionality in components.
Import#
import { CloseButton } from '@chakra-ui/react'
Usage#
<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>
Props#
The CloseButton composes Box component.
colorScheme
colorSchemeDescription
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"isDisabled
isDisabledDescription
If true, the close button will be disabled.
Type
booleansize
sizeDescription
The size of the CloseButton
Type
"lg" | "md" | "sm"Default
mdvariant
variantDescription
The variant of the CloseButton
Type
string