cnd-components-mcp/componentData/components/Button/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

### 尺寸与交互
```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>
         
      <Button.Group>
        <Button >基础按钮</Button>
        <Button style={{ width: "32px", padding: "0px" }}>
          <Icon type="arrow_circular" size="medium" />
        </Button>
      </Button.Group>
        
      <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 子组件用于将多个按钮组合在一个容器中',
};

```