@chakra-ui/close-button

Close Button

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.

Installation

yarn add @chakra-ui/close-button

# or

npm i @chakra-ui/close-button

Import component

import { CloseButton } from "@chakra-ui/close-button"

Usage

<CloseButton />

Disabled

Pass the isDisabled prop to put the close button component in a disabled state.

<CloseButton isDisabled />

Sizes

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

<>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</>

Similar packages

Other packages similar to @chakra-ui/close-button

react-icons

react-icons is a library that provides a collection of popular icons for React applications. It includes close icons that can be used similarly to the CloseButton in @chakra-ui/close-button. However, it does not provide the same level of customization and integration with Chakra UI's theme system.

react-bootstrap

react-bootstrap is a library that provides Bootstrap components for React. It includes a CloseButton component that can be used to close modals and alerts. While it offers similar functionality, it is designed to work with the Bootstrap framework rather than Chakra UI.

material-ui

material-ui is a popular React component library that follows Google's Material Design guidelines. It includes a CloseIcon component that can be used to create close buttons. While it offers similar functionality, it is designed to work with Material Design rather than Chakra UI.