# ClearX

控件的「清除」按钮，基于 Button（`type="plain"` + `SvgDiscX`）封装，点击后清空控件当前值。

## 适用场景

- input / textarea 等输入控件 suffix 位的清空入口
- select / suggest / cascade 等选择控件的「清空已选」
- date-picker / time-picker 输入框的清除小叉
- 任何需要「清空当前值」语义的自定义控件

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `-` | 否 | 自定义 class |
| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | 否 | 尺寸，与控件 size 档位对齐 |
| onClick | `(e: MouseEvent) => void \| Promise<unknown>` | `-` | 否 | 点击回调，返回 Promise 自动触发 loading 状态并防连击 |
| disabled | `boolean` | `-` | 否 | 是否禁用 |
| color | `"normal" \| "brand" \| "success" \| "danger" \| "warning"` | `-` | 否 | 颜色 |
| shape | `"normal" \| "capsule"` | `-` | 否 | 形状 |
| 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 |

## 典型用法

### 基础用法

> hover / active 有颜色反馈，指针为 `pointer`。

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

<ClearX onClick={handleClear} />
```

### 尺寸

> 尺寸档与控件（input / select 等）的 size 对齐，故覆盖 `xs` ~ `xl`。

```tsx
{(['xs', 'sm', 'md', 'lg', 'xl'] as const).map(size => (
    <ClearX key={size} size={size} />
))}
```

## 注意事项

- **与 CloseX 语义不同，不要混用**：ClearX（`SvgDiscX`）表示「清空控件的值」；CloseX（`SvgMarkX`）表示「关闭 / 移除」某个东西（dialog、popover、tag）
- `cursor: pointer` 与四档图标色（normal / hover / active / focus）由本组件统一提供，消费方只负责**位置与显隐**
- 组件**不设 `display`**：select / suggest 这类「hover 时才显示 clear」的控件靠自己的 `display: none` 控制显隐，ClearX 若自带 `display` 会盖掉控件的隐藏规则
- 盒子已做「贴着图标」的几何归一（`height/width: auto; border: 0`），避免与同位置其它图标宽度不一致而在显隐切换时挤动控件内容
- 默认 `tabIndex={-1}`，不抢控件的 tab 序；需要可聚焦时由调用方覆盖