import Box from '../../box';
import Button from '..';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Demo extends Component<{}, { loading: boolean }> {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
    };
  }

  setLoading = () => {
    this.setState({ loading: true });
  };

  render() {
    return (
      <Box direction="row" spacing={20}>
        <Button type="secondary" loading>
          Loading
        </Button>
        <Button
          type="primary"
          loading={this.state.loading}
          onClick={this.setLoading}
        >
          Click to loading
        </Button>
      </Box>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('button-demo-4'));