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-xui/close-button

# or

npm i @chakra-xui/close-button

Import component

import { CloseButton } from "@chakra-xui/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" />
</>

Change Log

1.0.3

Patch Changes

• Updated dependencies [e73878ee]:
  • @chakra-xui/utils@1.0.2
  • @chakra-xui/icon@1.0.2

1.0.2

Patch Changes

• 72bbd0db #2708 Thanks @TimKolberger! - Resolved an issue where DrawerCloseButton was not receiving its base styles when it was passed other styles through the __css property, breaking the button's positioning.

1.0.1

Patch Changes

• Updated dependencies [5c482483]:
  • @chakra-xui/utils@1.0.1
  • @chakra-xui/icon@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

• toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @chakra-xui/close-button

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @chakra-xui/close-button

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @chakra-xui/close-button

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @chakra-xui/close-button

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @chakra-xui/close-button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

• #891 (e107acc)
• close button component review (921b56c)
• ts issue with sx prop (d3b1340)
• update core css support (499a6a1)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

• #891 (e107acc)
• close button component review (921b56c)
• ts issue with sx prop (d3b1340)
• update core css support (499a6a1)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes

• #891 (e107acc)
• close button component review (921b56c)
• update core css support (499a6a1)