---
title: CloseButton 关闭按钮
description: 用于关闭对话框、模态框或 dismiss 内容的按钮组件
links:
  rac: Button
  source: close-button/close-button.tsx
  styles: close-button.css
  storybook: Components/Buttons/CloseButton
---

## 用法

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

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

## 示例

### 交互

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

### 自定义图标

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

## 自定义样式

### Tailwind CSS

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

### 全局 CSS

可使用 `@layer components` 指令自定义 CloseButton 组件类。
[了解更多](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;
  }
}
```

## 样式参考

HeroUI 遵循 [BEM](https://getbem.com/) 方法论，确保组件变体与状态可复用且易于自定义。

### CSS 类

CloseButton 组件使用以下 CSS 类（[查看源码样式](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/close-button.css)）：

#### 基础类 [!toc]

- `.close-button` - 基础组件样式

#### 变体类 [!toc]

- `.close-button--default` - 默认变体

### 交互状态

组件同时支持 CSS 伪类与 data 属性：

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

## API 参考

### CloseButton

| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `variant` | `"default"` | `"default"` | 按钮视觉变体 |
| `children` | `ReactNode \| function` | `<CloseIcon />` | 显示内容（默认为关闭图标） |
| `onPress` | `() => void` | - | 按下时的回调 |
| `isDisabled` | `boolean` | `false` | 是否禁用 |

### React Aria Button Props

CloseButton 继承所有 React Aria Button 属性。常用属性包括：

| Prop | 类型 | 描述 |
|------|------|------|
| `aria-label` | `string` | 屏幕阅读器的无障碍标签 |
| `aria-labelledby` | `string` | 标注按钮的元素 ID |
| `aria-describedby` | `string` | 描述按钮的元素 ID |

### Render Props

使用 render prop 模式时，提供以下值：

| Prop | 类型 | 描述 |
|------|------|------|
| `isHovered` | `boolean` | 是否悬停 |
| `isPressed` | `boolean` | 是否按下 |
| `isFocused` | `boolean` | 是否聚焦 |
| `isDisabled` | `boolean` | 是否禁用 |

## 相关组件

<RelatedComponents component="closebutton" />
