Sign in


Sign up


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.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Default
Primary
Success
Info
Warning
Danger

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
                
<h1>Example heading <Badge color="red">New</Badge></h1>
<h2>Example heading <Badge color="blue">New</Badge></h2>
<h3>Example heading <Badge color="black">New</Badge></h3>
<h4>Example heading <Badge color="green">New</Badge></h4>
<h5>Example heading <Badge color="grey">New</Badge></h5>
<h6>Example heading <Badge color="indigo">New</Badge></h6>
                
            

Contextual variations

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

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

Javascript usage MDB Pro component

Adding tags

Type a name and press enter to add tag. Click X to remove it.


<div class="chips chips-placeholder"></div>

$('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
});

Set initial tags


<div class="chips chips-initial"></div>

$('.chips-initial').material_chip({
    data: [{
      tag: 'Tag 1',
    }, {
      tag: 'Tag 2',
    }, {
      tag: 'Tag 3',
    }],
  });

Chip data object


var chip = {
    tag: 'chip content',
    image: '', //optional
    id: 1, //optional
};

jQuery Plugin Options MDB Pro component

Option Name Type Description
data array Set the chip data (look at the Chip data object)
placeholder string Set first placeholder when there are no tags.
secondaryPlaceholder string Set second placeholder when adding additional tags.

Events

Event Description
chips.add this method is triggered when a chip is added
chips.delete this method is triggered when a chip is deleted.
chips.select this method is triggered when a chip is selected
                        
 $('.chips').on('chip.add', function(e, chip){
    // you have the added chip here
  });

  $('.chips').on('chip.delete', function(e, chip){
    // you have the deleted chip here
  });

  $('.chips').on('chip.select', function(e, chip){
    // you have the selected chip here
  });
                        
                        

Methods

Parameter Description
data It returns the stored data
options It returns the given options
                        
$('.chips-initial').material_chip('data');
$('.chips-initial').material_chip('options');