# CloseX

关闭按钮组件，基于 Button 封装，用于关闭弹窗、面板等容器。支持异步操作和 loading 状态。

## 适用场景

- Dialog、Drawer 等弹层的关闭按钮
- 可关闭面板的关闭入口
- 需要异步确认后关闭的场景

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| size | `"md" \| "sm" \| "lg"` | `"md"` | 否 | 尺寸 |
| onClick | `(e: MouseEvent) => void \| Promise<unknown>` | `-` | 否 | 点击回调，返回 Promise 自动触发 loading 状态并防连击 |
| disabled | `boolean` | `-` | 否 | 是否禁用 |
| color | `"normal" \| "brand" \| "success" \| "danger" \| "warning" \| "primary"` | `-` | 否 | 颜色。**注意** `"primary"` 将废弃，应改用 `"brand"` |
| href | `string` | `-` | 否 | 设置后渲染为 `<a>` 元素 |
| target | `string` | `-` | 否 | `<a>` 的 target 属性 |
| download | `string` | `-` | 否 | `<a>` 的 download 属性 |
| loading | `boolean` | `-` | 否 | 控制是否处于 loading 状态，loading 时 click 无效但无 disabled 样式 |
| loadingIcon | `SvgFC` | `-` | 否 | 自定义 loading Icon |
| loadingType | `"normal" \| "icon-only"` | `-` | 否 | loading 类型 |
| loadingDelay | `number` | `-` | 否 | loading 图标的延迟响应时间（ms），0 为立即显示 |
| refHTMLElement | `Ref<HTMLButtonElement> \| Ref<HTMLAnchorElement>` | `-` | 否 | ref html element |

## 典型用法

### 基础用法

```tsx
import {CloseX} from '@befe/brick'

<CloseX />
<CloseX onClick={handleClose} />
```

### 尺寸

```tsx
<CloseX size={'sm'} />
<CloseX size={'md'} />
<CloseX size={'lg'} />
```

## 注意事项

- 2021 BREAKING CHANGES：尺寸跟随 plain icon button 规格（sm: 12px, md: 14px, lg: 16px），默认值从 `'sm'` 改为 `'md'`，同时移除了 xs 尺寸
- `color="primary"` 已废弃，应改用 `color="brand"`
- 不再支持 `props.style`
- `onClick` 返回 Promise 时自动进入 loading 状态并防连击