---
title: WKButton 按钮
group:
  title: 基础组件
  path: /base/
---

## 何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

- 在 组件库 中我们提供了六种按钮。

  - 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
  - 次级按钮：常用于添加操作。
  - 默认按钮：用于没有主次之分的一组行动点。
  - 文本按钮：用于最次级的行动点。
  - 链接按钮：一般用于链接，即导航至某位置。

- 以及四种状态属性与上面配合使用。
  - 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
  - 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
  - 禁用：行动点不可用的时候，一般需要文案解释。
  - 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { WKButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="基本使用">
      <WKButton text="基本按钮" />
    </PageWrapper>
  );
};
```

## 按钮尺寸

```tsx
/**
 * title: 按钮尺寸
 * desc: 按钮有超小、小, 中, 大 四种尺寸。 通过设置 size 为mini small default large 分别把按钮设为 超小,小,大尺寸。若不设置 size，则尺寸为中/default。
 */
import React from 'react';
import { WKButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="按钮尺寸">
      <WKButton type="primary" text="超小按钮" size="mini" />
      <WKButton type="primary" text="小按钮" size="small" />
      <WKButton type="primary" text="默认按钮" />
      <WKButton type="primary" text="大按钮" size="large" />
    </PageWrapper>
  );
};
```

## 按钮形狀

```tsx
/**
 * title: 按钮形狀
 * desc: 按钮有幽灵按钮、方形按钮,圆形按钮, 块按钮 四种样式。 通过设置 plain square round block 分别把按钮设为 相应的状态。若不设置，则默认为普通按钮。
 */
import React from 'react';
import { WKButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="按钮形狀">
      <WKButton type="primary" plain text="幽灵按钮" />
      <WKButton type="primary" square text="方形按钮" />
      <WKButton type="primary" round text="圆形按钮" />
      <WKButton type="primary" block text="块按钮" />
    </PageWrapper>
  );
};
```

## 按钮状态

```tsx
/**
 * title: 按钮状态
 * desc: 按钮有 7 种状态,通过设置type 来展示不同的状态
 */

import React from 'react';
import { WKButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="按钮状态">
      <WKButton type="primary" text="primary" />
      <WKButton text="disabled" disabled />
      <WKButton type="secondary" text="secondary" />
      <WKButton type="default" text="default" />
      <WKButton type="warning" text="warning" />
      <WKButton type="info" text="info" />
      <WKButton type="error" text="error" />
    </PageWrapper>
  );
};
```

## 前/后插槽

```tsx
/**
 * title: 前/后插槽
 * desc: 自定义文本的前后的内容
 */

import React from 'react';
import { WKButton, WKIcon } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper title="前/后插槽">
      <WKButton type="primary" text="前置插槽" before={<WKIcon icon="people" color="#fff" />} />
      <WKButton type="primary" text="后置插槽" after={<WKIcon icon="search" color="#fff" />} />
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKButton/index.d.ts' ></API>
