closebutton.mdx

import SEO from "../components/SEO";

CloseButton

The 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.

Import

import { CCloseButton } from '@chakra-ui/vue';

Usage

<c-close-button />

Button Size

Pass the size prop to adjust the size of the close button. Values can be sm, md or lg.

<c-stack isInline :spacing="6">
  <c-close-button size="sm" />
  <c-close-button size="md" />
  <c-close-button size="lg" />
</c-stack>

Props

The CloseButton composes CPseudoBox component.

Name	Type	Default	Description
aria-label	string		An accessible label for the close button
isDisabled	boolean		If true, the button will be disabled
color	string		The color of the close icon
size	sm, md, lg	md	The size of the close button