Button

Buttons allow users to take actions, and make choices, with a single tap. - Material Docs

import { Button } from 'material-bread';

The Button component has four variations: contained , outlined , flat and, text . Each can have text, icons, or have their children completely replaced. See demos for more variations.

CONTAINED

FLAT

OUTLINED

TEXT



ARCHIVE

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>
  <Button text={'contained'} type="contained" />
  <Button text={'flat'} type="flat" color={'#E91E63'} />
  <Button text={'outlined'} type="outlined" textColor={'#009688'} />
  <Button text={'text'} type="text" textColor={'#F44336'} />
  <Button text={'Archive'} type="outlined" textColor={'#673AB7'}  icon={<Icon name="archive" />} />
  <Button text={'Loading'} type="flat" loading color={'#00BCD4'} />
</View>

import React, { Component } from 'react';
import { View } from 'react-native';
import { Button } from 'material-bread';

export default class Actions extends Component {
  render() {
    return (
        <View >
            <Button text="Cancel" type={'text'}  onPress={() => console('onCancel')}  />
            <Button text="Accept" type={'contained'} onPress={() => console('onAccept')} />
        </Badge>
    );
  }
}

You can add any of the TouchableProps or Ripple props to the root component and they will be spread onto the Ripple component, please see the Ripple page to see full list of props.

Name

Description

Type

Default

borderSize

Size of border for outlined buttons

number

StyleSheet.hairlineWidth

color

Background color for each buttontype

string

theme.primary.main

containerStyle

Styles container of the button

object

density

Density scale. Supported scale values (-3, -2, -1, 0).

number

disabled

Toggle disabled styles

bool

fullWidth

Forces button to to take up 100% width

bool

hideLabel

Will hide label, useful with loading to show only loader

bool

icon

Icon element, will be displayed according to iconPosition

node

iconPosition

Postion of icon in button

string: left, right

left

iconSize

Custom size for icon

number

Toggles loading indicator in button

bool

onPress

Callback on button

func

radius

Border radius for both ripple and component

number

theme.button.borderRadius

rippleColor

Overrides default logic for ripple coloring

string

varies

style

Styles root element

object

text

Button Text

string

textColor

Color applied to text, styles border if type is outlined

string

theme.primary.main

textStyle

Styles applied to text

object

type

Indicates the type of button from available

string: flat, text, outlined, contained

text

useInputCasing

Use text casing as input and do not auto-capitalize

boolean

false

You can see even more examples in the Storybook environment.

Contained buttons are raised buttons and raise higher when pressed. Because of the shadow, you need to use containerStyle to style the root component to add spacing. The style prop will still style the inner Ripple component.

CONTAINED



ICON

RADIUS

DENSITY

DISABLED

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>
  <Button text={'contained'} type="contained" />
  <Button text={'Icon'} type="contained" color={'#E91E63'} icon={<Icon name="favorite" />} />
  <Button text={'Radius'} type="contained" color={'#FF5722'} radius={20} />
  <Button text={'Density'} type="contained" color={'#673AB7'} density={-1} />
  <Button text={'Loading'} type="contained" color={'#009688'} loading />
  <Button text={'Disabled'} type="contained" disabled />
</View>

Outlined buttons are similiar to Text Buttons but with a border. The border color will match the text color. Changing the textColor will change both. Change the backgroundColor by using color prop. The default border width is StyleSheet.hairlineWidth , but you can customize this with the borderSize prop.

OUTLINED



ICON

RADIUS

DENSITY

DISABLED

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>
    <Button text={'Outlined'} type="outlined" />
    <Button text={'Icon'} type="outlined" textColor={'#E91E63'} borderSize={2} icon={<Icon name="favorite" />} />
    <Button text={'Radius'} type="outlined" textColor={'#FF5722'} radius={20}  />
    <Button text={'Density'} type="outlined" textColor={'#673AB7'} density={-1} />
    <Button text={'Loading'} type="outlined" textColor={'#009688'} loading />
    <Button text={'Disabled'} type="outlined" disabled  />
</View>

Flat buttons are normal buttons without a shadow.

FLAT



ICON

RADIUS

DENSITY

DISABLED

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>
  <Button text={'Flat'} type="flat" />
  <Button text={'Icon'} type="flat" color={'#E91E63'} icon={<Icon name="favorite" />} />
  <Button text={'Radius'} type="flat" color={'#FF5722'} radius={20} />
  <Button text={'Density'} type="flat" color={'#673AB7'} density={-1} />
  <Button text={'Loading'} type="flat" color={'#009688'} loading />
  <Button text={'Disabled'} type="flat" disabled />
  <Button text={'Loading'} type="flat" color={'#009688'} loading />
</View>

TEXT



ICON

RADIUS

DENSITY

DISABLED

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
    <Button text={'Text'} />
    <Button text={'Icon'} textColor={'#E91E63'} borderSize={2} icon={<Icon name="favorite" />} />
    <Button text={'Radius'} textColor={'#FF5722'} radius={20}  />
    <Button text={'Density'} ttextColor={'#673AB7'} density={-1} />
    <Button text={'Loading'} textColor={'#009688'} loading  />
    <Button text={'Disabled'} disabled />
</View>

Icons can appear on the left or right. Icons match the color of the text provided. Icons hide when loading.



SAVE



DELETE



ARCHIVE



ADD

NOTIFY



FAV



Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>
    <Button text={'Save'} type="contained" color={'#2196F3'} icon={<Icon name="save" />} radius={20} />
    <Button text={'Delete'} type="flat" icon={<Icon name="delete" />} color={'#F44336'} />
    <Button text={'Archive'} type="outlined" textColor={'#673AB7'}  icon={<Icon name="archive" />} />
    <Button text={'Add'} textColor={'#009688'} icon={<Icon name="add" />}  />
    <Button text={'Notify'} type="outlined" textColor={'#E91E63'}  icon={<Icon name="notifications" />} iconPosition="right" borderSize={2}/>
    <Button text={'Fav'}  type="flat" icon={<Icon name="favorite" />}  color={'#00BCD4'} iconPosition="right" density={-1}/>
</View>

Adding fullWidth will force the component to take up available space.

CONTAINED

FLAT

OUTLINED

TEXT

Live Editing

<View style={{flexDirection: 'column'}}>
    <Button fullWidth text={'Contained'} type="contained"  containerStyle={{marginBottom: 8}} />
    <Button fullWidth text={'Flat'} type="flat" color={'#E91E63'} style={{marginBottom: 8}} />
    <Button fullWidth text={'Outlined'} type="outlined" textColor={'#673AB7'} style={{marginBottom: 8}} />
    <Button fullWidth text={'Text'} textColor={'#009688'}  style={{marginBottom: 8}}/>
</View>

Adding children will replace the text node, but not icon or loader. This allows for a more customization.



Upload files

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', flexWrap: 'wrap'}}>
  <Button
    style={{height: 100, width: 100, flexDirection: "column", marginRight: 24}}
    type={'outlined'}
    borderSize={4}
    radius={10}
  >
    <Icon name="cloud-upload" size={34} />
    <Text style={{fontWeight: '600', textAlign: 'center'}}>Upload files</Text>
  </Button>
</View>

Button

Component #

Usage #

Props #

Demos #

Contained #

Outlined #

Flat #

Text #

Icons #

Full Width #

Custom #