/**
 * title: "分割按钮"
 * description: "Button.Group 子组件用于将多个按钮组合在一个容器中"
 */
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>
  );
};