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.

chakra ui pro

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

Description

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

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

isDisabled

Description

If true, the close button will be disabled.

Type
boolean

size

Type
"sm" | "md" | "lg"
Default
"md"

variant

Description

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

Type
string
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel