Button

<Button>Base button</Button>

<Component initialState={{ isLoading: false }}>
  {({ state, setState }) => (
    <React.Fragment>
      <div style={{ marginBottom: '12px' }}>
        <Button
          onClick={() => setState({ isLoading: !state.isLoading })}
          marginBottom={4}
        >
          {state.isLoading ? 'Hide' : 'Show'} loading state
        </Button>
      </div>
      <Row>
        <Button marginRight={8} isLoading={state.isLoading}>
          Default
        </Button>
        <Button intent="primary" marginRight={8} isLoading={state.isLoading}>
          Primary
        </Button>
        <Button intent="success" marginRight={8} isLoading={state.isLoading}>
          Success
        </Button>
        <Button intent="warning" marginRight={8} isLoading={state.isLoading}>
          Warning
        </Button>
        <Button intent="danger" marginRight={8} isLoading={state.isLoading}>
          Danger
        </Button>
        <Button marginRight={8} iconBefore="edit" isLoading={state.isLoading}>
          Icon before
        </Button>
        <Button marginRight={8} iconAfter="edit" isLoading={state.isLoading}>
          Icon after
        </Button>
      </Row>
    </React.Fragment>
  )}
</Component>

<Row>
  <Button height={24} marginRight={8}>
    Height 24
  </Button>
  <Button height={32} marginRight={8}>
    Height 32
  </Button>
  <Button height={40} marginRight={8}>
    Height 40
  </Button>
  <Button height={48} marginRight={8}>
    Height 48
  </Button>
  <Button height={56} marginRight={8}>
    Height 56
  </Button>
</Row>

<Button isLink={true} href="/button#button-as-a-link">
  I am a link!
</Button>