# 包含各种类型的 Button

- title_en : different type of buttons
- order: 0

---

```js
<NukePlayGround>
  // primary
  <Button type="primary">primary</Button>
  // normal
  <Button type="normal">normal</Button>
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  press() {
    console.log('111');
  }
  render() {
    return (
      <Page title="Button">
        <Page.Intro main="type:primary" sub="主操作" />
        <Button.Group style={styles.btnWithMargin}>
          <Button onPress={this.press} type="primary">
            primary
          </Button>
          <Button disabled type="primary">
            disabled
          </Button>
        </Button.Group>
        <Page.Intro main="type:primary" sub="自定义颜色" />
        <Button.Group style={styles.btnWithMargin}>
          <Button
            onPress={this.press}
            type="primary"
            style={{
              borderWidth: '1rem',
              borderStyle: 'solid',
              borderColor: '#ff6600',
              backgroundColor: '#ff6600',
              color: '#ffffff'
            }}>
            primary
          </Button>
          <Button
            onPress={this.press}
            type="primary"
            style={{
              borderWidth: '1rem',
              borderStyle: 'solid',
              borderColor: '#B91630',
              backgroundColor: '#B91630',
              color: '#cccccc',
              'borderColor:active': '#770719',
              'backgroundColor:active': '#770719'
            }}>
            primary
          </Button>
        </Button.Group>
        <Page.Intro main="type:secondary" sub="次要操作" />
        <Button.Group style={styles.btnWithMargin}>
          <Button type="secondary">secondary</Button>
          <Button disabled type="secondary">
            disabled
          </Button>
        </Button.Group>
        <Page.Intro main="type:normal" sub="普通操作" />
        <Button.Group style={styles.btnWithMargin}>
          <Button type="normal">normal</Button>
          <Button disabled type="normal">
            disabled
          </Button>
        </Button.Group>
        <Page.Intro main="shape:warning" sub="警告类操作" />
        <Button.Group style={styles.btnWithMargin}>
          <Button type="primary" warning>
            primary
          </Button>
          <Button type="primary" warning disabled>
            primary
          </Button>
          <Button type="normal" warning>
            normal
          </Button>
          <Button type="normal" warning disabled>
            normal
          </Button>
        </Button.Group>
        <Page.Intro main="block:true" sub="独占一行" />
        <Button style={styles.btnWithMargin} type="primary" block>
          primary
        </Button>
        <Page.Intro main="rect:true" sub="直角" />
        <Button.Group style={styles.btnWithMargin}>
          <Button style={styles.btn} rect type="normal">
            Normal
          </Button>
          <Button style={styles.btn} rect type="primary">
            Primary
          </Button>
          <Button style={styles.btn} rect type="secondary">
            Secondary
          </Button>
        </Button.Group>

        <Page.Intro main="size" sub="尺寸" />
        <Button.Group style={styles.btnWithMargin}>
          <Button style={styles.btn} size="large" type="primary">
            large
          </Button>
          <Button style={styles.btn} size="medium" type="primary">
            medium
          </Button>
          <Button style={styles.btn} size="small" type="primary">
            small
          </Button>
        </Button.Group>

        <Page.Intro main="Button.Group rect" sub="Group用法" />
        <Button.Group style={styles.btnWithMargin} rect>
          <Button type="normal">Normal</Button>
          <Button type="third">Third</Button>
          <Button type="primary">Primary</Button>
        </Button.Group>
      </Page>
    );
  }
};
const styles = {
  btnWithMargin: {
    marginTop: '30rem',
    marginBottom: '50rem',
    marginLeft: '42rem',
    marginRight: '42rem'
  },
  btnLine: {
    marginTop: '30rem',
    marginBottom: '50rem',
    paddingLeft: '42rem',
    paddingRight: '42rem' //#1170bc;
  }
};
render(<App />);
```