---
nav:
  title: 组件
  order: 2
group:
  title: 基础组件
  order: 1
title: Button
order: 1
category: atom
---

# 按钮

基于 Ant Design Button 组件封装，支持链接跳转和右侧图标功能。

## 何时使用

- 响应用户点击行为
- 触发一个操作
- 作为链接跳转到其他页面
- 需要右侧图标的按钮场景

## 代码演示

### 按钮类型 (type)

最简单的按钮用法。

```tsx
import React from 'react';
import { Button } from '@pisell/materials';

export default () => {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button>默认按钮</Button>
      <Button type="primary">主要按钮</Button>
      <Button type="dashed">虚线按钮</Button>
      <Button type="link">链接按钮</Button>
    </div>
  );
};
```

### 按钮尺寸

按钮有大、中、小三种尺寸。

```tsx
import React from 'react';
import { Button } from '@pisell/materials';

export default () => {
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <Button size="large">大按钮</Button>
      <Button size="middle">中按钮</Button>
      <Button size="small">小按钮</Button>
    </div>
  );
};
```

### 按钮状态

按钮支持加载、禁用等状态。

```tsx
import React from 'react';
import { Button } from '@pisell/materials';

export default () => {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button loading>加载中</Button>
      <Button disabled>禁用按钮</Button>
      <Button danger>危险按钮</Button>
    </div>
  );
};
```

### 链接按钮

通过 `href` 属性可以将按钮设置为链接跳转。

```tsx
import React from 'react';
import { Button } from '@pisell/materials';

export default () => {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button href="https://www.antd.design" target="_blank">
        打开 Ant Design
      </Button>
      <Button href="/docs" type="primary">
        查看文档
      </Button>
    </div>
  );
};
```

### 右侧图标

通过 `rightIcon` 属性可以在按钮右侧添加图标。

```tsx
import React from 'react';
import { Button } from '@pisell/materials';
import { Activity } from '@pisell/icon';

export default () => {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button rightIcon={<Activity />}>下一步</Button>
      <Button rightIcon={<Activity />} type="primary">
        下载
      </Button>
    </div>
  );
};
```

## API

| 参数           | 说明                                                  | 类型                                                              | 默认值    |
| -------------- | ----------------------------------------------------- | ----------------------------------------------------------------- | --------- |
| type           | 按钮类型                                              | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |
| size           | 按钮尺寸                                              | `large` \| `middle` \| `small`                                    | `middle`  |
| shape          | 按钮形状                                              | `default` \| `circle` \| `round`                                  | `default` |
| danger         | 设置危险按钮                                          | `boolean`                                                         | `false`   |
| loading        | 设置按钮载入状态                                      | `boolean`                                                         | `false`   |
| disabled       | 按钮失效状态                                          | `boolean`                                                         | `false`   |
| block          | 将按钮宽度调整为其父宽度的选项                        | `boolean`                                                         | `false`   |
| href           | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | `string`                                                          | -         |
| rightIcon      | 右侧图标                                              | `ReactNode`                                                       | -         |
| \_\_designMode | 设计模式标识，用于低代码编辑器                        | `'design'` \| `undefined`                                         | -         |

### 事件

| 事件名称 | 说明             | 回调参数                      |
| -------- | ---------------- | ----------------------------- |
| onClick  | 点击按钮时的回调 | `(event: MouseEvent) => void` |

## 注意事项

1. 当设置了 `href` 属性时，按钮会表现为链接行为
2. 在低代码编辑器中，`href` 属性会被忽略以避免编辑时的页面跳转
3. `rightIcon` 属性会在按钮文本右侧添加图标，与文本之间有 8px 的间距
4. 组件完全兼容 Ant Design Button 的所有原生属性
