# Button

<Button {...props}>primary</Button>
<br />
<Button type="primary" disabled={true}>primary disabled</Button>

<Button type="default" className="eee">default</Button>
<br />
<Button type="default" disabled={true}>default disabled</Button>

<Button type="danger" className="eee">danger</Button>
<br />
<Button type="danger" disabled={true}>danger disabled</Button>

<Button type="primary" size="medium" className="eee">medium default</Button>
<br />
<Button type="primary" size="medium" disabled={true}>medium default disabled</Button>

<Button type="default" size="medium" className="eee">medium default</Button>
<br />
<Button type="default" size="medium" disabled={true}>medium default disabled</Button>

<Button type="default" size="medium" className="eee" mainText="按钮主标题Normal" subText="按钮副标题文本Normal"></Button>

<Button type="primary" size="small" className="eee">primary</Button>
<br />
<Button type="primary" size="small" disabled={true}>primary disabled</Button>

<Button type="default" size="small" className="eee">default</Button>
<br />
<Button type="default" size="small" disabled={true}>default disabled</Button>

<Button type="primary" size="mini" className="eee">primary</Button>
<br />
<Button type="primary" size="mini" disabled={true}>primary disabled</Button>

<Button type="default" size="mini" className="eee">default</Button>
<br />
<Button type="default" size="mini" disabled={true}>default disabled</Button>

<Button type="primary" shape="pill" className="eee">primary pill</Button>
<br />
<Button type="primary" shape="pill" disabled={true}>primary pill disabled</Button>

<Button type="default" shape="pill" className="eee">default pill</Button>
<br />
<Button type="default" shape="pill" disabled={true}>default pill disabled</Button>

<Button
  type="default"
  size="medium"
  shape="pill"
  className="eee"
  mainText="按钮主标题Normal"
  subText="按钮副标题文本Normal"
></Button>

<ButtonGroup>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="primary" style={{ width: 210 }}>主要操作</Button>
</ButtonGroup>

<ButtonGroup>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="primary" style={{ width: 210 }} disabled>主要操作</Button>
</ButtonGroup>

<ButtonGroup>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="primary" style={{ width: 295 }}>主要操作</Button>
</ButtonGroup>

<ButtonGroup>
  <Button type="operate" mainText="操作" icon={<div className="q-bottom-group__item__icon"></div>}></Button>
  <Button type="primary" style={{ width: 295 }} disabled>主要操作</Button>
</ButtonGroup>

<ButtonGroup>
  <Button type="default" style={{ flex: 1, border: 'none', borderTop: '1px solid #eee', color: '#999' }}>次要操作</Button>
  <Button type="primary" style={{ flex: 2 }}>主要操作</Button>
</ButtonGroup>

<ButtonGroup>
  <Button type="default" style={{ flex: 1, margin: '0 5px' }}>重置</Button>
  <Button type="primary" style={{ flex: 1, margin: '0 5px' }}>确定</Button>
</ButtonGroup>