## 简介

按钮通常用于触发操作行为或任务流程。其中分隔按钮属于复合组件，由 Button 和 Menu 组成，其在触发区域上可以分为两部分，其中 Icon 部分作为弹层菜单的触发区域，菜单只有在鼠标悬浮或点击右侧图标区域的时候才会展示

## 示例

### 尺寸与交互

```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';

const titleStyle = {
  fontSize: '12px',
  fontWeight: '400',
  lineHeight: '22px',
  marginTop: '28px',
};

const centerStyle = {
  display: 'flex',
  gap: '16px',
};

export default () => {
  return (
    <>
      <h2 style={{ ...titleStyle, marginTop: 0 }}>36px高度</h2>
      <div style={centerStyle}>
        <Button size="large">基础按钮</Button>
        <Button size="large" disabled>
          基础按钮
        </Button>
      </div>
      <h2 style={titleStyle}>32px高度</h2>
      <div style={centerStyle}>
        <Button>基础按钮</Button>
        <Button disabled>基础按钮</Button>
      </div>
      <h2 style={titleStyle}>24px高度</h2>
      <div style={centerStyle}>
        <Button size="small">基础按钮</Button>
        <Button size="small" disabled>
          基础按钮
        </Button>
      </div>
    </>
  );
};

export const meta = {
  title: '按钮尺寸',
  describe:
    '可以用 size 属性设置按钮大小。 warning 属性显示高危，错误等提示的按钮，text 属性是文字按钮，loading 属性是加载中状态按钮，组件已绑定 onClick 事件回调函数，供处理不同业务时使用。',
};

```

### 基础形态

```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';
const centerStyle = {
  display: 'flex',
  gap: '16px',
};

export default () => {
  return (
    <div style={centerStyle}>
      <Button type="primary">基础按钮</Button>
      <Button type="primary" disabled>
        基础按钮
      </Button>
      <Button type="primary" warning>
        基础按钮
      </Button>
      <Button type="primary" disabled warning>
        基础按钮
      </Button>
    </div>
  );
};

export const meta = {
  title: '填充按钮',
  describe: '通过 type 属性设置按钮类型。',
};

```

#### 标识按钮

```tsx
import React from 'react';
import { Button, Icon } from '@alicloud/console-components';

const centerStyle = {
  display: 'flex',
  gap: '16px',
};

export default () => {
  return (
    <div style={centerStyle}>
      <Button type="primary">
        <Icon type={'download'} />
        基础按钮
      </Button>
      <Button type="primary" disabled>
        <Icon type={'download'} />
        基础按钮
      </Button>
    </div>
  );
};

export const meta = {
  title: '组合标识',
  describe: '通过 children 属性可以自定义按钮内容。',
};

```

#### 功能按钮

```tsx
import React from 'react';
import { Button, Icon } from '@alicloud/console-components';

const centerStyle = {
  display: 'flex',
  gap: '16px',
};

export default () => {
  return (
    <div style={centerStyle}>
      <Button.Group>
        <Button type="primary">基础按钮</Button>
        <Button type="primary" style={{ width: "32px", padding: "0px" }}>
          <Icon type="arrow_circular" size="medium" />
        </Button>
      </Button.Group>
      &nbsp; &nbsp;
      <Button.Group>
        <Button >基础按钮</Button>
        <Button style={{ width: "32px", padding: "0px" }}>
          <Icon type="arrow_circular" size="medium" />
        </Button>
      </Button.Group>
      &nbsp;&nbsp;
      <Button.Group>
        <Button disabled>基础按钮</Button>
        <Button disabled style={{ width: "32px", padding: "0px" }}>
          <Icon type="arrow_circular" size="medium" />
        </Button>
      </Button.Group>
    </div>
  );
};

export const meta = {
  title: '分割按钮',
  describe:
    'Button.Group 子组件用于将多个按钮组合在一个容器中',
};

```

## API

### Button

| 参数      | 说明                        | 类型                                                                                                                                              | 默认值                                                                                                         | 是否必填 |
| --------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -------- |
| type      | 按钮的类型                  | 'primary' | 'secondary' | 'normal'                                                                                                              | 'normal'                                                                                                       |          |
| size      | 按钮的尺寸                  | ButtonSize                                                                                                                                        | 'medium'                                                                                                       |          |
| icons     | 按钮中可配置的 Icon         | { loading?: React.ReactNode }                                                                                                                     | -                                                                                                              |          |
| iconSize  | 按钮中 Icon 的尺寸          | | number<br/> | 'xxs'<br/> | 'xs'<br/> | 'small'<br/> | 'medium'<br/> | 'large'<br/> | 'xl'<br/> | 'xxl'<br/> | 'xxxl'<br/> | 'inherit' | 默认根据 size 自动映射，映射规则：<br/>size:large -> `small`<br/>size:medium -> `xs`<br/>size:small -> `xs` |          |
| htmlType  | button 标签的 type 值       | 'submit' | 'reset' | 'button'                                                                                                                   | 'button'                                                                                                       |          |
| component | 最终渲染的 jsx 标签标签类型 | 'button' | 'a' | React.ComponentType\<unknown>                                                                                                  | -                                                                                                              |          |
| loading   | 设置按钮的载入状态          | boolean                                                                                                                                           | false                                                                                                          |          |
| ghost     | 是否为幽灵按钮              | true | false | 'light' | 'dark'                                                                                                                | false                                                                                                          |          |
| text      | 是否为文本按钮              | boolean                                                                                                                                           | false                                                                                                          |          |
| warning   | 是否为警告按钮              | boolean                                                                                                                                           | false                                                                                                          |          |
| disabled  | 是否禁用                    | boolean                                                                                                                                           | false                                                                                                          |          |
| onClick   | 点击按钮的回调              | React.MouseEventHandler                                                                                                                           | -                                                                                                              |          |

### Button.Group

| 参数 | 说明                           | 类型       | 默认值 | 是否必填 |
| ---- | ------------------------------ | ---------- | ------ | -------- |
| size | 统一设置 Button 组件的按钮大小 | ButtonSize | -      |          |

### ButtonSize

按钮类型

```typescript
export type ButtonSize = 'small' | 'medium' | 'large';
```

## 无障碍键盘操作指南

| 按键  | 说明            |
| :---- | :-------------- |
| Enter | 触发onClick事件 |
| SPACE | 触发onClick事件 |