import React, {Component} from 'react';
import {Button} from 'hana-ui';

/**
 * @en
 * Base
 *
 * Base usage.
 *
 * @cn
 * 基础
 *
 * 基础用法。
 */
export default class ExampleBase extends Component {
  render() {
    const baseStyle = {marginRight: 10};

    return (
      <div>
        <Button style={baseStyle} size={'large'}>(ง •̀_•́)</Button>
        <Button style={baseStyle} type={'primary'}>(ง •̀_•́)</Button>
        <Button style={baseStyle} size={'small'} type={'error'}>(ง •̀_•́)</Button>
      </div>
    );
  }
}

基础用法。

import React, {Component} from 'react';
import {Button} from 'hana-ui';

/**
 * @en
 * Group
 *
 * Button could has an icon at the front.
 *
 * @cn
 * 成组
 *
 * 可以在按钮的开头放一个图标。
 */
export default class ExampleIcon extends Component {
  render() {
    const baseStyle = {marginRight: 10};

    return (
      <div>
        <Button
          style={baseStyle}
          icon={'hana'}
          iconColor={'black'}
        >
          wow
        </Button>
        <Button
          type={'primary'}
          style={baseStyle}
          icon={'hana'}
          iconColor={'white'}
        />
      </div>
    );
  }
}

可以在按钮的开头放一个图标。

import React, {Component} from 'react';
import {Button} from 'hana-ui';

/**
 * @en
 * Label
 * 
 * Button component can set a label to show data after button.
 * 
 * @cn
 * 标记
 * 
 * 也可以将一些Label放在标记后面。
 * 
 */
export default class ExampleLabel extends Component {
  render() {
    return (
      <div>
        <Button
          label={'( /) V (\\ )'}
          icon={'hana'}
          iconColor={'white'}
          style={{marginRight: 10}}
        />
        <Button
          label={'( /) V (\\ )'}
          labelPosition={'right'}
          icon={'hana'}
          iconColor={'white'}
        />
      </div>
    );
  }
}

也可以将一些Label放在标记后面。

import React, {Component} from 'react';
import {ButtonGroup, Button} from 'hana-ui';

/**
 * @en
 * Group
 *
 * Multiple buttons could be added to a group.
 *
 * @cn
 * 成组
 *
 * 多个按钮可以归于一组。
 */
export default class ExampleGroup extends Component {
  render() {
    return (
      <ButtonGroup>
        <Button>
          Group 1
        </Button>
        <Button
          htmlType={'submit'}
          type={'primary'}
          icon={'hana'}
          iconColor={'white'}
        />
        <Button
          type={'disabled'}
          icon={'hana'}
          iconColor={'white'}
        >
          Group 3
        </Button>
        <Button>
          Group 4
        </Button>
      </ButtonGroup>
    );
  }
}

多个按钮可以归于一组。