---
title: CloseButton
description: Button component for closing dialogs, modals, or dismissing content
links:
  rac: Button
  source: close-button/close-button.tsx
  styles: close-button.css
  storybook: Components/Buttons/CloseButton
---

## Usage

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

<ComponentPreview
  name="close-button-default"
/>

## Examples

### Interactive

<ComponentPreview
  name="close-button-interactive"
/>

### With Custom Icon

<ComponentPreview
  name="close-button-with-custom-icon"
/>

## Customization

### Tailwind CSS

<ComponentPreview name="close-button-custom-styles" />

### Global CSS

To customize the CloseButton component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@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](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/close-button.css)):

#### Base Classes [!toc]

- `.close-button` - Base component styles

#### Variant Classes [!toc]

- `.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 |

## Related Components

<RelatedComponents component="closebutton" />
