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

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>
    </>
  );
};