> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIzYjhiMWIyMS0wZjc0LTRmZjUtOWEzOS1lYjVlYzJjYmQzODMiLCJleHAiOjE3NzgyNjQxNzYsImlhdCI6MTc3ODI2Mzg3Nn0.dpkSt2jJkCuw-k121yfKpzhhMTj6TWolzNYoQzqAZ6w
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 按钮组件

> 学习如何在 Fern 文档中使用 Button 组件。创建具有自定义样式、尺寸、意图和图标的交互式按钮。

`<Button>` 组件渲染具有各种样式、尺寸和意图的交互式按钮。

## 使用方法

<div>
  <div>
    <div>
      <Button intent="primary">
        主要按钮
      </Button>

      <Button intent="success">
        成功按钮
      </Button>

      <Button outlined>
        轮廓按钮
      </Button>
    </div>
  </div>
</div>

```jsx Markdown 
<Button intent="primary">主要按钮</Button>
<Button intent="success">成功按钮</Button>
<Button outlined>轮廓按钮</Button>
```

## 变体

### 意图

<div>
  <div>
    <div>
      <Button intent="primary">
        主要按钮
      </Button>

      <Button intent="success">
        成功按钮
      </Button>

      <Button intent="warning">
        警告按钮
      </Button>

      <Button intent="danger">
        危险按钮
      </Button>

      <Button intent="none">
        普通按钮
      </Button>
    </div>
  </div>
</div>

```jsx Markdown
<Button intent="primary">主要按钮</Button>
<Button intent="success">成功按钮</Button>
<Button intent="warning">警告按钮</Button>
<Button intent="danger">危险按钮</Button>
<Button intent="none">普通按钮</Button>
```

### 样式

<div>
  <div>
    <div>
      <Button intent="success" outlined large rounded>
        大型、轮廓、圆角
      </Button>

      <Button intent="success" minimal>
        最小化
      </Button>

      <Button intent="warning" mono>
        等宽字体
      </Button>
    </div>
  </div>
</div>

```jsx Markdown
<Button intent="success" outlined large rounded>大型、轮廓、圆角</Button>
<Button intent="success" minimal>最小化</Button>
<Button intent="warning" mono>等宽字体</Button>
```

### 尺寸

<div>
  <div>
    <div>
      <Button small>
        小按钮
      </Button>

      <Button>
        普通按钮
      </Button>

      <Button large>
        大按钮
      </Button>
    </div>
  </div>
</div>

```jsx Markdown
<Button small>小按钮</Button>
<Button>普通按钮</Button>
<Button large>大按钮</Button>
```

### 带图标

<div>
  <div>
    <div>
      <Button icon="download">
        下载
      </Button>

      <Button rightIcon="arrow-right">
        继续
      </Button>

      <Button icon="star" rightIcon="arrow-right">
        收藏
      </Button>
    </div>
  </div>
</div>

```jsx Markdown
<Button icon="download">下载</Button>
<Button rightIcon="arrow-right">继续</Button>
<Button icon="star" rightIcon="arrow-right">收藏</Button>
```

### 链接和禁用状态

<div>
  <div>
    <div>
      <Button href="/learn/docs/getting-started/overview">
        链接按钮
      </Button>

      <Button disabled>
        禁用按钮
      </Button>
    </div>
  </div>
</div>

```jsx Markdown
<Button href="/learn/docs/getting-started/overview">链接按钮</Button>
<Button disabled>禁用按钮</Button>
```

## 属性

### 基础

<ParamField path="intent" type="'none' | 'primary' | 'success' | 'warning' | 'danger'" required={false} default="'none'">
  按钮的视觉意图
</ParamField>

<ParamField path="disabled" type="boolean" required={false} default="false">
  按钮是否被禁用
</ParamField>

<ParamField path="small" type="boolean" required={false} default="false">
  是否使用小尺寸
</ParamField>

<ParamField path="large" type="boolean" required={false} default="false">
  是否使用大尺寸
</ParamField>

<ParamField path="icon" type="string | ReactNode" required={false}>
  左侧显示的图标
</ParamField>

<ParamField path="href" type="string" required={false}>
  要导航到的 URL（渲染为链接按钮）
</ParamField>

<ParamField path="target" type="string" required={false}>
  指定在哪里打开链接的 URL。对于典型的文档站点，链接可以在同一标签页（`_self`）或新标签页（`_blank`）中打开。对于嵌入在仪表板或 iframe 中的文档，链接可以在父框架（`_parent`）或最顶层框架（`_top`）中打开。
</ParamField>

### 高级

<ParamField path="minimal" type="boolean" required={false} default="false">
  是否使用最小化样式
</ParamField>

<ParamField path="outlined" type="boolean" required={false} default="false">
  是否使用轮廓样式
</ParamField>

<ParamField path="full" type="boolean" required={false} default="false">
  按钮是否应占据全宽
</ParamField>

<ParamField path="rounded" type="boolean" required={false} default="false">
  是否使用圆角
</ParamField>

<ParamField path="active" type="boolean" required={false} default="false">
  按钮是否处于激活状态
</ParamField>

<ParamField path="mono" type="boolean" required={false} default="false">
  是否使用等宽字体
</ParamField>

<ParamField path="rightIcon" type="string | ReactNode" required={false}>
  右侧显示的图标
</ParamField>

<ParamField path="text" type="ReactNode" required={false}>
  按钮文本内容
</ParamField>

<ParamField path="className" type="string" required={false}>
  额外的 CSS 类
</ParamField>