Skip to content

Button.md

Latest commit

 

History

History
executable file
·
104 lines (93 loc) · 3.9 KB

Button.md

File metadata and controls

executable file
·
104 lines (93 loc) · 3.9 KB
Raw

##customize-button-headref

Button Customize

Steps to customize theme for Button attributes:

With Button theme

With this theme of Button component you can modify any style rules applied to the default Button component.

Syntax

import React, { Component } from 'react-native';
import { Container, Content, Button, Icon, Text, StyleProvider } from 'native-base';
import buttonTheme from './Themes/buttonTheme';
​// buttonTheme is the customized theme of Button Component​
export default class ThemeButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <StyleProvider style={buttonTheme()}>
                      <Button primary>
                        <Text> Primary </Text>
                      </Button>
                      <Button success>
                        <Text> Success </Text>
                      </Button>
                      <Button info>
                        <Text> Info </Text>
                      </Button>
                      <Button warning>
                        <Text> Warning </Text>
                      </Button>
                      <Button danger>
                        <Text> Danger </Text>
                      </Button>
                      <Button small>
                        <Text> Small </Text>
                      </Button>
                      <Button>
                        <Text> Default </Text>
                      </Button>
                      <Button large>
                        <Text> Large </Text>
                      </Button>
                    </StyleProvider>
                </Content>
            </Container>
        );
    }
}

With Variables

With the variable.js file you can modify the variable values passed to the theme of the Button component.
Say value of btnTextSize to change the fontSize of the Text in Button.

Syntax

import React, { Component } from 'react-native';
import { Container, Content, Button, Icon, Text, getTheme, StyleProvider } from 'native-base';
import customVariables from './Themes/variable';
​// getTheme is default theme of NativeBase Components
// customVariables is customized variables used in the components theme
export default class ThemeButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <StyleProvider style={buttonTheme(customVariables)}>
                      <Button primary>
                        <Text> Primary </Text>
                      </Button>
                      <Button success>
                        <Text> Success </Text>
                      </Button>
                      <Button info>
                        <Text> Info </Text>
                      </Button>
                      <Button warning>
                        <Text> Warning </Text>
                      </Button>
                      <Button danger>
                        <Text> Danger </Text>
                      </Button>
                      <Button small>
                        <Text> Small </Text>
                      </Button>
                      <Button>
                        <Text> Default </Text>
                      </Button>
                      <Button large>
                        <Text> Large </Text>
                      </Button>
                    </StyleProvider>
                </Content>
            </Container>
        );
    }
}

Note: To customise button theme, refer Theme Color