Vue 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.

Contact Person Caroline Smith
Contact Person Adam Grey
Contact Person Danny Moore
Contact Person Daisy Sun
Contact Person Martha Um
Contact Person Alexa Deyn
Martha
Agnes
Caroline
Elisa
Francesca

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 colors badges

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 color="primary-color">Primary</badge>
<badge color="success-color">Success</badge>
<badge color="info-color">Info</badge>
<badge color="warning-color">Warning</badge>
<badge color="danger-color">Danger</badge>


Pills badges

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

Badges with icons

                
<badge color="indigo"><fa icon="android" size="2x"/></badge>
<badge color="cyan"><fa icon="cog" size="2x"/></badge>
<badge color="orange"><fa icon="btc" size="2x"/></badge>
<badge pill color="teal"><fa icon="heart" size="2x"/></badge>
<badge pill color="green"><fa icon="apple" size="2x"/></badge>
<badge pill color="purple"><fa icon="users" size="2x"/></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 src="https://mdbootstrap.com/img/Photos/Avatars/avatar-10.jpg" alt="Contact Person" size="md" waves> Anna Smith</chip>
<chip src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Contact Person" size="lg" waves> Lara Lim</chip>
                
            

Chips without avatars MDB Pro component

Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 220
Tag 219
Tag 218
Tag 217
Tag 216
Tag 215
                    
<chip color="pink lighten-4" close> Tag 220 </chip>
                    
                

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
              
<chip src="https://mdbootstrap.com/img/Photos/Avatars/img(7).jpg" alt="Contact Person"> Caroline Smith</chip>
<chip src="https://mdbootstrap.com/img/Photos/Avatars/img(28).jpg" alt="Contact Person" color="cyan darken-2" text="white" size="md"> Martha Lores</chip>
<chip src="https://mdbootstrap.com/img/Photos/Avatars/img(21).jpg" alt="Contact Person" color="success-color" text="white" size="lg">The Sylvester</chip>
<chip color="teal lighten-2" text="white" close>Martha</chip>
<chip color="indigo lighten-4" text="indigo" size="md" close>24.08.2016</chip>
<chip gradient="aqua" text="white" size="lg" close :handle-close="baba">Aqua gradient</chip>
              
          

Chip input MDB Pro component

Adding tags

Chip input is a component that helps to style and render collections of strings. It accepts placeholder String prop, that gets replaced with secondaryPlaceholder, if present after there is a chip in already. Try adding tags by hitting Enter and deleting them with Backspace or by pressing X.


<chip-input placeholder="+Tag" secondaryPlaceholder="Enter a tag"/>

Setting initial tags

Chip input can use :chips Array prop to render predefined tags.


<chip-input :chips="['Tag 1','Tag 2','Tag 3']"/>