# 按钮

触发一个动作或事件，例如提交表单或显示对话框。

```jsx
<Button>
  <BookmarkIcon /> 收藏
</Button>
```

## [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`          |

## [示例](#示例)

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

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

```jsx
<Flex gap="3" align="center">
  <Button size="1" variant="soft">
    编辑个人资料
  </Button>

  <Button size="2" variant="soft">
    编辑个人资料
  </Button>

  <Button size="3" variant="soft">
    编辑个人资料
  </Button>
</Flex>
```

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

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

```jsx
<Flex align="center" gap="3">
  <Button variant="classic">编辑个人资料</Button>

  <Button variant="solid">编辑个人资料</Button>

  <Button variant="soft">编辑个人资料</Button>

  <Button variant="surface">编辑个人资料</Button>

  <Button variant="outline">编辑个人资料</Button>
</Flex>
```

#### 幽灵按钮

使用 `ghost` 变体来展示一个没有边框的按钮。幽灵按钮在布局中表现得像文本，因为它们使用负边距以光学方式与其兄弟元素对齐，同时在活动和悬停状态下保持填充。

```jsx
<Button variant="ghost">编辑个人资料</Button>
```

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

使用 `color` 属性为按钮分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex gap="3">
  <Button color="indigo" variant="soft">
    编辑个人资料
  </Button>

  <Button color="cyan" variant="soft">
    编辑个人资料
  </Button>

  <Button color="orange" variant="soft">
    编辑个人资料
  </Button>

  <Button color="crimson" variant="soft">
    编辑个人资料
  </Button>
</Flex>
```

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

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

```jsx
<Flex direction="column" gap="3">
  <Flex gap="3">
    <Button color="gray" variant="classic">
      编辑个人资料
    </Button>

    <Button color="gray" variant="solid">
      编辑个人资料
    </Button>

    <Button color="gray" variant="soft">
      编辑个人资料
    </Button>

    <Button color="gray" variant="surface">
      编辑个人资料
    </Button>

    <Button color="gray" variant="outline">
      编辑个人资料
    </Button>
  </Flex>

  <Flex gap="3">
    <Button color="gray" variant="classic" highContrast>
      编辑个人资料
    </Button>

    <Button color="gray" variant="solid" highContrast>
      编辑个人资料
    </Button>

    <Button color="gray" variant="soft" highContrast>
      编辑个人资料
    </Button>

    <Button color="gray" variant="surface" highContrast>
      编辑个人资料
    </Button>

    <Button color="gray" variant="outline" highContrast>
      编辑个人资料
    </Button>
  </Flex>
</Flex>
```

### [圆角](#圆角)

使用 `radius` 属性为按钮指定一个特定的圆角值。

```jsx
<Flex gap="3">
  <Button radius="none" variant="soft">
    编辑个人资料
  </Button>

  <Button radius="large" variant="soft">
    编辑个人资料
  </Button>

  <Button radius="full" variant="soft">
    编辑个人资料
  </Button>
</Flex>
```

### [带图标](#带图标)

您可以直接在按钮内嵌套图标。自动提供适当的间距。

```jsx
<Flex gap="3">
  <Button variant="classic">
    <BookmarkIcon /> 收藏
  </Button>

  <Button variant="solid">
    <BookmarkIcon /> 收藏
  </Button>

  <Button variant="soft">
    <BookmarkIcon /> 收藏
  </Button>

  <Button variant="surface">
    <BookmarkIcon /> 收藏
  </Button>

  <Button variant="outline">
    <BookmarkIcon /> 收藏
  </Button>
</Flex>
```

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

使用 `loading` 属性在按钮内容位置显示加载指示器，同时保持按钮在正常状态下的原始大小。按钮在加载时将被禁用。

```jsx
<Flex gap="3">
  <Button loading variant="classic">
    收藏
  </Button>

  <Button loading variant="solid">
    收藏
  </Button>

  <Button loading variant="soft">
    收藏
  </Button>

  <Button loading variant="surface">
    收藏
  </Button>

  <Button loading variant="outline">
    收藏
  </Button>
</Flex>
```

如果您在按钮内有一个图标，可以使用按钮的 `disabled` 状态，并将图标包裹在一个独立的 [Spinner](/themes/docs/components/spinner) 中，以实现更复杂的设计。

```jsx
<Flex gap="3">
  <Button disabled variant="classic">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    收藏
  </Button>

  <Button disabled variant="solid">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    收藏
  </Button>

  <Button disabled variant="soft">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    收藏
  </Button>

  <Button disabled variant="surface">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    收藏
  </Button>

  <Button disabled variant="outline">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    收藏
  </Button>
</Flex>
```

<!--$-->

<!--/$-->