Color Schemes for CloseButton
are not implemented in the default theme. You can extend the theme to implement them.
CloseButton
CloseButton is essentially a button with a close icon. It is used to handle the close functionality in feedback and overlay components like Drawers and Modals.
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
colorScheme
Description
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
isDisabled
isDisabled
Description
If true
, the close button will be disabled.
Type
boolean
size
size
Type
"sm" | "md" | "lg"
Default
"md"
variant
variant
Description
Variants for CloseButton
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web