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 { CCloseButton } from '@chakra-ui/vue';


Editable Example
<c-close-button />

Button Size#

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

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


The CloseButton composes CPseudoBox component.

aria-labelstringAn accessible label for the close button
isDisabledbooleanIf true, the button will be disabled
colorstringThe color of the close icon
sizesm, md, lgmdThe size of the close button

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!