# CloseButton 关闭按钮 · HeroUI

> 用于关闭对话框、模态框或收起内容的按钮组件。

- 页面: https://jiguang132.com/zh/systems/heroui/docs/components/close-button
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## 引入

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

### 用法


> 示例 `close-button-default`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/close-button


### 自定义图标


> 示例 `close-button-with-custom-icon`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/close-button


### 交互


> 示例 `close-button-interactive`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/close-button


## 样式

### 传入 Tailwind CSS 类

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

function CustomCloseButton() {
  return <CloseButton className="text-red-600 hover:bg-red-100">Close</CloseButton>;
}
```

### 自定义组件类

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

#### 基础类

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

#### 变体类

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

### 交互状态

该组件同时支持 CSS 伪类与 data 属性，便于灵活编写样式：

- **悬停**：`:hover` 或 `[data-hovered="true"]`
- **激活/按压**：`:active` 或 `[data-pressed="true"]`
- **聚焦**：`:focus-visible` 或 `[data-focus-visible="true"]`
- **禁用**：`:disabled` 或 `[aria-disabled="true"]`

## API 参考

### CloseButton Props

| Prop | 类型 | 默认值 | 描述 |
| ---- | ---- | ------ | ---- |
| `variant` | `"default"` | `"default"` | 按钮的视觉变体 |
| `children` | `ReactNode \| function` | `` | 显示内容（默认为关闭图标） |
| `onPress` | `() => void` | - | 按钮按下时触发的事件处理函数 |
| `isDisabled` | `boolean` | `false` | 是否禁用按钮 |

### React Aria Button Props

CloseButton 继承所有 React Aria Button props。常见 props 包括：

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

### RenderProps

使用渲染 prop 模式时，会提供以下值：

| Prop | 类型 | 描述 |
| ---- | ---- | ---- |
| `isHovered` | `boolean` | 按钮是否处于悬停状态 |
| `isPressed` | `boolean` | 按钮是否处于按压状态 |
| `isFocused` | `boolean` | 按钮是否处于聚焦状态 |
| `isDisabled` | `boolean` | 按钮是否禁用 |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt