# 图标按钮

专为单个图标使用而设计的按钮。

```jsx
<IconButton>
  <MagnifyingGlassIcon width="18" height="18" />
</IconButton>
```

## [API 参考](#api-参考)

此组件基于 `button` 元素，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

| Prop           | Type                                                 | Default          |
| -------------- | ---------------------------------------------------- | ---------------- |
| `asChild`      | `boolean`                                            | No default value |
| `size`         | `Responsive<"1" \| "2" \| "3" \| "4">`               | `"2"`            |
| `variant`      | `enum`                                               | `"solid"`        |
| `color`        | `enum`                                               | No default value |
| `highContrast` | `boolean`                                            | No default value |
| `radius`       | `"none" \| "small" \| "medium" \| "large" \| "full"` | No default value |
| `loading`      | `boolean`                                            | `false`          |

## [示例](#示例)

It's strongly recommended to include an<!-- --> [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) <!-- -->or<!-- --> [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) <!-- -->prop on Icon Button components since they don't contain visible text. Screen readers rely on this label to announce the button's purpose to users.

### [尺寸](#尺寸)

使用 `size` 属性控制按钮的大小。

```jsx
<Flex align="center" gap="3">
  <IconButton size="1" variant="soft">
    <MagnifyingGlassIcon width="15" height="15" />
  </IconButton>

  <IconButton size="2" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton size="3" variant="soft">
    <MagnifyingGlassIcon width="22" height="22" />
  </IconButton>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性控制按钮的视觉样式。

```jsx
<Flex gap="3">
  <IconButton variant="classic">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton variant="solid">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton variant="surface">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton variant="outline">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>
</Flex>
```

#### 幽灵

使用 `ghost` 变体显示没有边框的按钮。幽灵按钮在布局中表现得像文本，因为它们使用负边距相对于其兄弟元素进行光学对齐，同时在活动和悬停状态下保持内边距。

```jsx
<IconButton variant="ghost">
  <MagnifyingGlassIcon width="18" height="18" />
</IconButton>
```

### [颜色](#颜色)

使用 `color` 属性指定特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex gap="3">
  <IconButton color="crimson" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton color="indigo" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton color="grass" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton color="orange" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增加与背景的颜色对比度。

```jsx
<Flex direction="column" gap="3">
  <Flex gap="3">
    <IconButton color="gray" variant="classic">
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="solid">
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="soft">
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="surface">
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="outline">
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>
  </Flex>

  <Flex gap="3">
    <IconButton color="gray" variant="classic" highContrast>
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="solid" highContrast>
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="soft" highContrast>
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="surface" highContrast>
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>

    <IconButton color="gray" variant="outline" highContrast>
      <MagnifyingGlassIcon width="18" height="18" />
    </IconButton>
  </Flex>
</Flex>
```

### [半径](#半径)

使用 `radius` 属性指定特定的半径值。

```jsx
<Flex gap="3">
  <IconButton radius="none" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton radius="large" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton radius="full" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>
</Flex>
```

### [加载](#加载)

使用 `loading` 属性在按钮内容位置显示加载旋转器。按钮在加载时将被禁用。

```jsx
<Flex gap="3">
  <IconButton loading variant="classic">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton loading variant="solid">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton loading variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton loading variant="surface">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton loading variant="outline">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>
</Flex>
```

<!--$-->

<!--/$-->