Usage

import { CloseButton } from "@heroui/react";

Examples

Interactive

Clicked: 0 times

With Custom Icon

Custom Icon

Alternative Icon

Customization

Tailwind CSS

Global CSS

To customize the CloseButton component classes, you can use the @layer components directive. Learn more.

@layer components {
  .close-button {
    @apply bg-red-100 text-red-800 hover:bg-red-200;
  }

  .close-button--custom {
    @apply rounded-full border-2 border-red-300;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The CloseButton component uses these CSS classes (View source styles):

Base Classes

.close-button - Base component styles

Variant Classes

.close-button--default - Default variant

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Hover: :hover or [data-hovered="true"]
Active/Pressed: :active or [data-pressed="true"]
Focus: :focus-visible or [data-focus-visible="true"]
Disabled: :disabled or [aria-disabled="true"]

API Reference

CloseButton

Prop	Type	Default	Description
`variant`	`"default"`	`"default"`	Visual variant of the button
`children`	`ReactNode \| function`	`<CloseIcon />`	Content to display (defaults to close icon)
`onPress`	`() => void`	-	Handler called when the button is pressed
`isDisabled`	`boolean`	`false`	Whether the button is disabled

React Aria Button Props

CloseButton extends all React Aria Button props. Common props include:

Prop	Type	Description
`aria-label`	`string`	Accessible label for screen readers
`aria-labelledby`	`string`	ID of element that labels the button
`aria-describedby`	`string`	ID of element that describes the button

Render Props

When using the render prop pattern, these values are provided:

Prop	Type	Description
`isHovered`	`boolean`	Whether the button is hovered
`isPressed`	`boolean`	Whether the button is pressed
`isFocused`	`boolean`	Whether the button is focused
`isDisabled`	`boolean`	Whether the button is disabled

Alert

AlertDialog

Chip

CloseButton

On this page