# Button Demo

* order: 2

Button style

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-button';
import Page from 'nuke-page';
import { isWeb } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';
let md = {
  Core: {
    [`color-brand1-6`]: '#ff6600'
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      Core: { 'color-brand1-6': '#ff6600' }
    };
  }
  press() {
    this.setState({
      Core: { 'color-brand1-6': '#45345345' }
    });
  }

  render() {
    return (
      <StyleProvider
        style={{ Core: this.state.Core }}
        commonConfigs={{ fixedFont: true }}
        androidConfigs={{ materialDesign: true }}
      >
        <Page title="Button">
          <Page.Intro main="press" />

          <View style={styles.btns}>
            <Button onPress={() => this.press()} type="primary">
              press 事件
            </Button>
          </View>
          <Page.Intro main="longpress" />
          <View style={styles.btns}>
            <Button
              ref="mybtn"
              onLongpress={e => this.longpress(e)}
              type="primary"
            >
              longpress 事件
            </Button>
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  result: {
    height: '120rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resultLine: {
    height: '80rem',
    marginLeft: '30rem',
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    // justifyContent:'center',
    alignItems: 'center'
  },
  resultLabel: {
    fontSize: '24rem',
    width: '200rem',
    color: '#999999'
  },
  resultText: {
    fontSize: '28rem'
  },
  btns: {
    margin: '30rem'
  }
};
render(<App />);
```