CloseButton

A button component used to close or dismiss content, such as modals, alerts, or other dismissible elements.

Usage

import { CloseButton } from '@blendx-ui';

// Basic usage
<CloseButton onClick={handleClose} />

// With custom aria-label
<CloseButton 
  onClick={handleClose}
  aria-label="Close modal"
/>

Props

Prop	Type	Required	Default	Description
onClick	function	Yes	-	Callback function called when the button is clicked
aria-label	string	No	"Close"	Accessibility label for the button
className	string	No	-	Additional CSS classes to apply
disabled	boolean	No	false	Whether the button is disabled
variant	string	No	-	Visual variant of the button

Accessibility

• The button includes an aria-label by default for screen readers
• It's keyboard accessible and can be triggered with the Enter or Space key
• The button has appropriate focus styles for keyboard navigation

Best Practices

• Always provide an onClick handler
• Consider providing a custom aria-label if the default "Close" isn't descriptive enough
• Use this component for dismissible elements like modals, alerts, or popovers

Related Components

• Modal
• Alert
• Toast
• Popover

Notes

This component is built on top of React Bootstrap's CloseButton component.