Chip

Chips are compact elements that represent an input, attribute, or action. - Material Docs

import { Chip } from 'material-bread';

This is the base Chip component for the four types of chips: InputChip , ChoiceChip , FilterChip , and ActionChip . Using this base component directly gives you more customization options and more flexibility.

Chip

Delete me





Alaska



User

Click me



Biking



Live Editing

class ChipPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      chipTwo: true,
      chipThree: true,
      chipSix: true
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    
          <Chip text={'Chip'} />       
          <Chip
              text={'Delete me'}
              visible={this.state.chipTwo}
              onDelete={() => this.setState({chipTwo: false})}   
          />
          <Chip
              text={'Alaska'}
              color={'#009688'}
              visible={this.state.chipThree}
              onDelete={() => this.setState({chipThree: false})}
              leftIcon={<Icon name="place" color={'white'} />}
          />
          <Chip
              text={'User'}
              themeColor={'primary'}
              onPress={() => console.log('clicked four')}
              leftIcon={<Avatar 
                type="image" 
                image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } 
            />}
          />
          <Chip 
              text={'Click me'}
              chipStyle={'outlined'}
              themeColor={'primary'} 
              onPress={() => console.log('clicked five')}
          />
          <Chip 
              text={'Biking'}
              chipStyle={'outlined'}
              themeColor={'secondary'}
              leftIcon={<Icon name="directions-bike" color={'#E91E63'} />}
              visible={this.state.chipSix}
              onDelete={() => this.setState({chipSix: false})}
          / >
      </View>
    );
  }
}

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

class ChipPage extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        chip: true,
      }
    }
    render() {
      return (
        <View style={{flexDirection: 'row', alignItems: 'center'}}>         
            <Chip
                canDelete
                onDelete={() => this.setState({chip: false})}
                text={'Delete me'}
                visible={this.state.chip}
            />
        </View>
      );
    }
}

Name

Description

Type

Default

chipStyle

Style of chip

string: outlined, flat

flat

color

Color of chip background and outline

string

disabled

Adds disabled styles and prevents clicking

bool

leftIcon

Displays component on the left of the content

node

onDelete

Callback func for delete icon, adding this will add delete icon

func

onPress

Callback func for chip, adds ripple

func

radius

Radius of chip and ripple

number

rightIcon

Displays component on the right of the content

node

style

Styles root component

string

text

Text content for chip

string

textStyles

Styles text content

string

themeColor

Assigns a theme color to chip

string

visible

Toggle whether chip is shown or not

bool

Chips have two styles: filled or outlined . Adding onPress will make the entire chip clickable. The rest can be customized as shown below.

Adding canDelete provides a prebuilt delete icon on the right side, it will replace any right icon provided. Toggle the visible prop to show or hide the chip.

Chip



Delete me





Alaska



User



Click me





Biking



Live Editing

class ChipPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      chipOne: true,
      chipTwo: true,
      chipThree: true,
      chipFour: true,
      chipFive: true,
      chipSix: true
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    
          <Chip 
            text={'Chip'}
            visible={this.state.chipOne}
            onDelete={() => this.setState({chipOne: false})}   
          />       
          <Chip
              text={'Delete me'}
              visible={this.state.chipTwo}
              onDelete={() => this.setState({chipTwo: false})}   
          />
          <Chip
              text={'Alaska'}
              color={'#009688'}
              visible={this.state.chipThree}
              onDelete={() => this.setState({chipThree: false})}
              leftIcon={<Icon name="place" color={'white'} />}
          />
          <Chip
              text={'User'}
              themeColor={'primary'}
              onPress={() => console.log('clicked four')}
              visible={this.state.chipFour}
              onDelete={() => this.setState({chipFour: false})}
              leftIcon={<Avatar 
                type="image" 
                image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } 
            />}
          />
          <Chip 
              text={'Click me'}
              chipStyle={'outlined'}
              themeColor={'primary'} 
              onPress={() => console.log('clicked five')}
              visible={this.state.chipFive}
              onDelete={() => this.setState({chipFive: false})}
          />
          <Chip 
              text={'Biking'}
              chipStyle={'outlined'}
              themeColor={'secondary'}
              leftIcon={<Icon name="directions-bike" color={'#E91E63'} />}
              visible={this.state.chipSix}
              onDelete={() => this.setState({chipSix: false})}
          / >
      </View>
    );
  }
}

There are component spots on either side of the content in the chip. usually you psas an Icon , Avatar , or IconButton , but you can pass whatever you want. However, the right icon will be overwritten if you pass onPress , see second chip.



Mood



Delete me



Alaska



User



Click me



Biking



Live Editing

class ChipPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      chipTwo: true,
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    
          <Chip 
            text={'Mood'}
            leftIcon={<Icon name="mood" color={'#4CAF50'} />}
            rightIcon={<Icon name="mood-bad" color={'#F44336'} />}
            onPress={() => console.log('Mood')}
          />       
          <Chip
              text={'Delete me'}
              visible={this.state.chipTwo}
              onDelete={() => this.setState({chipTwo: false})}
              rightIcon={<Icon name="face" color={'#666666'} />}
          />
          <Chip
              text={'Alaska'}
              color={'#009688'}
              rightIcon={<IconButton name="place" color={'white'} onPress={() => console.log('clicked second right icon')} />}
              />
          <Chip
              text={'User'}
              themeColor={'primary'}
              onPress={() => console.log('clicked four')}
              visible={this.state.chipFour}
              onDelete={() => this.setState({chipFour: false})}
              leftIcon={<Avatar 
                type="image" 
                image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } 
              />}
          />
          <Chip 
              text={'Click me'}
              chipStyle={'outlined'}
              themeColor={'primary'} 
              onPress={() => console.log('clicked five')}
              leftIcon={<Avatar 
                type="text" 
                content="MP" 
                />
              }
          />
          <Chip 
              text={'Biking'}
              chipStyle={'outlined'}
              themeColor={'secondary'}
              leftIcon={<Icon name="directions-bike" color={'#E91E63'} />}
              rightIcon={<Avatar 
                type="icon" 
                content="directions-bike"
                contentColor="white"
                color={'#E91E63'}
              />}
          / >
      </View>
    );
  }
}

You replace the text content component by passing in children , style the outer component, and change the radius prop to create more custom chips.



Mood



Delete me



Alaska



React

Live Editing

class ChipPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      chipOne: true,
      chipTwo: true,
    }
  }
  render() {
    return (
      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    
          <Chip 
            text={'Mood'}
            themeColor={'primary'}
            radius={2}
            leftIcon={<Icon name="mood" color={'#FBC02D'} />}
            onPress={() => console.log('Mood')}
            onDelete={() => this.setState({chipOne: false})}
            visible={this.state.chipOne}
          />       
          <Chip
              text={'Delete me'}
              radius={2}
              chipStye={'outlined'}
              color={'black'}
              visible={this.state.chipTwo}
              onDelete={() => this.setState({chipTwo: false})}
          />
          <Chip
              text={'Alaska'}
              color={'#009688'}
              radius={100}
              style={{height: 40}}
              visible={this.state.chipThree}
              onDelete={() => this.setState({chipThree: false})}
          />
          <Chip
              text={'User'}
              chipStyle={'outlined'}
              color={'black'}
              radius={2}
              style={{borderWidth: 3, height: 40}}
          >
            <Text style={{fontSize: 18, marginHorizontal: 12, fontWeight: '600'}}>React</Text>
          </Chip>
      </View>
    );
  }
}

Chip

Component #

Usage #

Props #

Demos #

Delete #

Icons #

Custom #