import React from 'react';
import { Button, Row, Col } from '@btri-ui/base';
import { Space } from '@btri-ui/base';
import { Icon } from '@btri-ui/base';

const StatusButton = () => {
  return (
    <>
      <Row autoMode={true}>
        <Col span={2}>
          <Space direction="vertical">
            <Button type="error">主要错误</Button>
            <Button type="errorLink">主要错误</Button>
            <Button type="error" icon={<Icon iconName="Add"></Icon>}>
              主要错误
            </Button>
            <Button type="errorLink" afterIcon={<Icon iconName="Down"></Icon>}>
              主要错误
            </Button>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <Button type="alarm">主要告警</Button>
            <Button type="alarmLink">主要告警</Button>
            <Button type="alarm" icon={<Icon iconName="Add"></Icon>}>
              主要告警
            </Button>
            <Button type="alarmLink" afterIcon={<Icon iconName="Down"></Icon>}>
              主要告警
            </Button>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <Button type="success" icon={<Icon iconName="Add"></Icon>}>
              主要成功
            </Button>
            <Button type="successLink">主要成功</Button>
            <Button type="success">主要成功</Button>
            <Button
              type="successLink"
              afterIcon={<Icon iconName="Down"></Icon>}
            >
              主要成功
            </Button>
          </Space>
        </Col>
      </Row>
    </>
  );
};

export default StatusButton;