Chakra-UI

I♥️Components

CloseButton

|

Chakra Docs

|

⦾ The CloseButton component in Chakra UI is a versatile and essential element used to trigger close functionality in various components. It consists of a button adorned with a close icon, providing a visually intuitive way for users to dismiss or close elements such as modals, alerts, or pop-ups.

The CloseButton component can be imported as follows:

Examples

CloseButton Sizes

⦾ The CloseButton component is conveniently available in three sizes: sm, md, lg.
<CloseButton size="sm" />
<CloseButton size="md" />
<CloseButton size="lg" />

Code

Basic Usage

⦾ This basic example demonstrates how to use the CloseButton component in Chakra UI to create a dismissible alert. Alerts are commonly used to provide important information or notifications to users, and having the ability to close or dismiss them enhances the user experience. By incorporating the CloseButton component into an alert, users can easily remove or hide the alert when they no longer need it.

Inside of an alert, the CloseButton must have its positioning specified within the Alert component.

Code

CloseButton Within a Modal

⦾ To include a CloseButton within a Modal, simply use the ModalCloseButton component.

Code

CloseButton Within a Toast

⦾ To include a CloseButton within a Toast, all you have to do is use the isCloseable prop set to true. The positioning of the CloseButton is automatically handled by the Toast component.

Code

CloseButton Within a Popover

Within a Popover, the CloseButton is automatically positioned by using the PopoverCloseButton component.

Code

CloseButton Within a Drawer

To insert a CloseButton inside of a Drawer, use the DrawerCloseButton component. The button is automatically positioned by the Drawer component.

Code

Did you know?

Creative Idea No. 1

Custom Dismissible Notification: You can create your own custom dismissible notification with all your unique specifications using the CloseButton component. In this example, we use Chakra's useDisclosure hook to manage the state of the notification. The CloseButton is absolutely positioned within a Box component that represents the notification.
This is an important custom notification message!

Code

Creative Idea No. 2

Custom Sidebar Naviation: You can use the the CloseButton component to create an interactive toggle for a sidebar or navigation panel, enabling users to show or hide the sidebar with a single click. This provides a smooth and intuitive way to manage space on the screen and allows users to focus on the main content when needed.

Custom Sidebar

Item 1

Item 2

Item 3

Code

Creative Idea No. 3

Expanded Image Modal: You can create an interactive image overlay using the CloseButton component when you have an image gallery and want to provide users with the option to view an image in a larger overlay. By combining the CloseButton with a modal component, you can create a visually stunning and interactive image overlay that users can close when they're done exploring the image.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.