# Button Demo

* order: 2

Button style

---

```js
/** @jsx createElement */
import { View, Text, Button, Page, Env, ThemeProvider } from 'weex-nuke';
const { isWeb } = Env;
const { StyleProvider } = ThemeProvider;
import { createElement, Component, render } from 'rax';
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 />);
```