Bootstrap Tags, Labels & Badges

Tags in all their simplicity are a method of categorizing your content with use of a specific word, phrases or formulas, making it easier for your user to browse throughout your articles, comments or pages as a whole.

Their main goal is to provide your visitors with an intuitive way of getting what they want. Just consider, how convenient it is to find all the articles related to web development just by using web development tag.

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
                <h1>This is the first heading <Badge color="red">New</Badge></h1>
<h2>This is the second heading <Badge color="cyan">New</Badge></h2>
<h3>This is the third heading <Badge color="amber darken-2">New</Badge></h3>
<h4>This is the fourth heading <Badge color="pink">New</Badge></h4>
<h5>This is the fifth heading <Badge color="purple darken-2">New</Badge></h5>
<h6>This is the sixth heading <Badge color="indigo">New</Badge></h6>

Contextual colors badges

Add any of the below mentioned modifier classes to change the appearance of a tag.

Default Primary Success Info Warning Danger 
                  
<Badge color="default">Default</Badge>
<Badge color="primary">Primary</Badge>
<Badge color="success">Success</Badge>
<Badge color="info">Info</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>

Pills badges

Pimk Light Blue Indigo Purple Orange Green 
                  
<Badge color="pink" pill>Pink</Badge>
<Badge color="light-blue" pill>Light Blue</Badge>
<Badge color="indigo" pill>Indigo</Badge>
<Badge color="purple" pill>Purple</Badge>
<Badge color="orange" pill>Orange</Badge>
<Badge color="green" pill>Green</Badge>

Badges with icons

                  <Badge color="default"><Fa icon="facebook" aria-hidden="true"/></Badge>
<Badge color="primary"><Fa icon="instagram" aria-hidden="true"/></Badge>
<Badge color="success"><Fa icon="snapchat-ghost" aria-hidden="true"/></Badge>
<Badge color="info"><Fa icon="anchor" aria-hidden="true"/></Badge>
<Badge color="warning"><Fa icon="sun-o" aria-hidden="true"/></Badge>
<Badge color="danger"><Fa icon="battery-3" aria-hidden="true"/></Badge><br/>
<Badge color="pink" pill><Fa icon="android" aria-hidden="true"/></Badge>
<Badge color="light-blue" pill><Fa icon="heart-o" aria-hidden="true"/></Badge>
<Badge color="indigo" pill><Fa icon="bullhorn" aria-hidden="true"/></Badge>
<Badge color="purple" pill><Fa icon="comments-o" aria-hidden="true"/></Badge>
<Badge color="orange" pill><Fa icon="coffee" aria-hidden="true"/></Badge>
<Badge color="green" pill><Fa icon="user" aria-hidden="true"/></Badge><br/>
<Badge color="indigo"><Fa icon="android" size="2x" aria-hidden="true"/></Badge>
<Badge color="cyan"><Fa icon="cog" size="2x" aria-hidden="true"/></Badge>
<Badge color="orange"><Fa icon="btc" size="2x" aria-hidden="true"/></Badge>
<Badge color="teal" pill><Fa icon="heart" size="2x" aria-hidden="true"/></Badge>
<Badge color="green" pill><Fa icon="apple" size="2x" aria-hidden="true"/></Badge>
<Badge color="purple" pill><Fa icon="users" size="2x" aria-hidden="true"/></Badge>

Chips with avatars MDB Pro component

Contact Person John Doe
Contact Person Anna Smith
Contact Person Lara Lim
Contact Person Tom Dark
Contact Person Kate Horwitz
Contact Person Danny Clark 

<Chip src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person" waves> John Doe </Chip>
<Chip size="md" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-10.jpg" alt="Contact Person" waves> Anna Smith </Chip>
<Chip size="lg" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Contact Person" waves> Lara Lim </Chip>

Chips without avatars MDB Pro component

These chips contain close buttons because of the passed in close prop. The close action handling can be customized, using a handleClose prop accepting a function. In the example below it is the ExamplePage holding information about whether to show particular chips in its state, while a simple function handles their disappearance using currying.

Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 220
Tag 219
Tag 218
Tag 217
Tag 216
Tag 215 
                  
class ExamplePage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        show1: true,
        show2: true,
        show3: true,
        show4: true,
        show5: true,
        show6: true,
    }
  }

  handleCloseHere = (param) => (e) => {
      this.setState({
        ['show'+param]: false
    })
  }

  render() {
      return (
        <div>
          { this.state.show1 && <Chip waves close handleClose={this.handleCloseHere(1)} > Tag 1 </Chip> }
          { this.state.show2 && <Chip waves close handleClose={this.handleCloseHere(2)} > Tag 2 </Chip> }
          { this.state.show3 && <Chip waves close handleClose={this.handleCloseHere(3)} > Tag 3 </Chip> }
          { this.state.show4 && <Chip waves close handleClose={this.handleCloseHere(4)} > Tag 4 </Chip> }
          { this.state.show5 && <Chip waves close handleClose={this.handleCloseHere(5)} > Tag 5 </Chip> }
          { this.state.show6 && <Chip waves close handleClose={this.handleCloseHere(6)} > Tag 6 </Chip> }
        </div>
    )
  }
}

Chips with various colors MDB Pro component

Info notification

MDB has hundreds of colors to use within chips. Take a look here to know all the possibilities.

Contact Person Caroline Smith
Contact Person Adam Grey
Contact Person Danny Moore
Contact Person Daisy Sun
Contact Person Martha Lores
Contact Person Alexandra Deyn
Contact Person Olaf Horwitz
Contact Person Mary-Kate Dare
Contact PersonThe Sylvester
Martha
Agnes
Caroline
Elisa
Francesca
25.09.2017
24.08.2016
23.07.2015
22.06.2014
Aqua gradient
Peach gradient
Purple gradient
Blue gradient 
                  class ExamplePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show1: true,
      show2: true,
      show3: true,
    }
  }

  handleCloseHere = (param) => (e) => {
      this.setState({
        ['show'+param]: false
    })
  }

  render() {
      return (
        <div>
          <Chip size="lg" src="https://mdbootstrap.com/img/Photos/Avatars/img(27).jpg" alt="Contact Person" bgColor="primary-color" text="white" waves> Olaf Horwitz </Chip>
          <Chip size="lg" src="https://mdbootstrap.com/img/Photos/Avatars/img(30).jpg" alt="Contact Person" bgColor="danger-color" text="white" waves> Mary-Kate Dare </Chip>
          <Chip size="lg" src="https://mdbootstrap.com/img/Photos/Avatars/img(21).jpg" alt="Contact Person" bgColor="success-color" text="white" waves> The Sylvester </Chip>
          {this.state.show1 && <Chip bgColor="teal lighten-2" text="white" close waves handleClose={this.handleCloseHere(1)}> Martha </Chip> }
          {this.state.show2 && <Chip size="md" bgColor="red lighten-4" text="red" close waves handleClose={this.handleCloseHere(2)}> 25.09.2017 </Chip> }
          {this.state.show3 && <Chip size="lg" gradient="aqua" text="white" close waves handleClose={this.handleCloseHere(3)}> Aqua gradient </Chip> }
      </div>
    )
  }
}

Chips Input MDB Pro component

Adding tags

The Chips Input component has a bit more sophisticated logic inside. It generates chips basing on it state - type a name and press enter to add tag, meaning add it to an array of strings the component has in its state. It keeps track of chips it renders, so no additional close-handling methods are required - just click X to remove chips. Lastly, it takes in a placeholder prop, that makes the input render its content when the chips list is empty, and then there is the secondaryPlaceholder prop, the content of which getting applied once there is more one or more chips.

<ChipsInput placeholder="+Tag" secondaryPlaceholder="Enter a tag"/>

Set initial tags

The component's state holding chips data can be altered on render or dynamically using the chips prop.

<ChipsInput chips={['Tag 1', 'Tag 2', 'Tag 3']}/>