@chakra-ui/close-button

What is @chakra-ui/close-button?

@chakra-ui/close-button is a component from the Chakra UI library that provides a customizable close button. It is typically used to close modals, alerts, or any other dismissible elements in a user interface.

What are @chakra-ui/close-button's main functionalities?

Basic Close Button

This code demonstrates how to use the basic CloseButton component from the @chakra-ui/close-button package. It renders a simple close button.

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

function App() {
  return <CloseButton />;
}

Custom Size

This code shows how to render a CloseButton with a custom size. The 'size' prop can be used to adjust the button's size.

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

function App() {
  return <CloseButton size='lg' />;
}

Custom Color

This code demonstrates how to customize the color of the CloseButton. The 'color' prop allows you to set the button's color.

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

function App() {
  return <CloseButton color='red.500' />;
}

Event Handling

This code shows how to handle click events on the CloseButton. The 'onClick' prop can be used to specify a function to be called when the button is clicked.

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

function App() {
  const handleClose = () => {
    alert('Close button clicked!');
  };

  return <CloseButton onClick={handleClose} />;
}

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.

README

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" />
</>