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

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

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License