Vue Bootstrap Tags, Labels & Badges

Vue Tags, Labels & Badges - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap tags are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.

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.

Basic example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
        
            
        <template>
          <div>
            <h1>Example heading <mdb-badge color="primary">New</mdb-badge></h1>
            <h2>Example heading <mdb-badge color="primary">New</mdb-badge></h2>
            <h3>Example heading <mdb-badge color="primary">New</mdb-badge></h3>
            <h4>Example heading <mdb-badge color="primary">New</mdb-badge></h4>
            <h5>Example heading <mdb-badge color="primary">New</mdb-badge></h5>
            <h6>Example heading <mdb-badge color="primary">New</mdb-badge></h6>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBadge } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbBadge
            }
          }
        </script>

Badges can be used as part of links or buttons to provide a counter.

        
            
        <template>
          <mdb-btn color="primary">
            Notifications <mdb-badge color="danger" class="ml-2">New</mdb-badge>
          </mdb-btn>
        </template>
      
        
    
        
            
          <script>
            import { mdbBadge, mdbBtn } from 'mdbvue';
            export default {
              name: 'BadgePage',
              components: {
                mdbBadge,
                mdbBtn
              }
            }
          </script>

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

        
            
        <template>
          <mdb-btn color="primary">
            Notifications <mdb-badge color="danger" class="ml-2">New</mdb-badge>
            <span class="sr-only">unread messages</span>
          </mdb-btn>
        </template>
      
        
    
        
            
          <script>
            import { mdbBadge, mdbBtn } from 'mdbvue';
            export default {
              name: 'BadgePage',
              components: {
                mdbBadge,
                mdbBtn
              }
            }
          </script>

Contextual variations

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

Default Primary Secondary Success Danger Warning Info Light Dark 
        
            
        <template>
          <div>
            <mdb-badge color="default">Default</mdb-badge>
            <mdb-badge color="primary">Primary</mdb-badge>
            <mdb-badge color="success">Success</mdb-badge>
            <mdb-badge color="info">Info</mdb-badge>
            <mdb-badge color="warning">Warning</mdb-badge>
            <mdb-badge color="danger">Danger</mdb-badge>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBadge } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbBadge
            }
          }
        </script>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Pill badges

Use the pill prop to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Default Primary Secondary Success Danger Warning Info Light Dark 
        
            
        <template>
          <div>
            <mdb-badge pill color="pink">Pink</mdb-badge>
            <mdb-badge pill color="light-blue">Light blue</mdb-badge>
            <mdb-badge pill color="indigo">Indigo</mdb-badge>
            <mdb-badge pill color="purple">Purple</mdb-badge>
            <mdb-badge pill color="orange">Orange</mdb-badge>
            <mdb-badge pill color="green">Green</mdb-badge>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBadge } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbBadge
            }
          }
        </script>

Badges with icons 

        
            
        <template>
          <div>
            <mdb-badge color="indigo"><fa icon="android" size="2x"/></mdb-badge>
            <mdb-badge color="cyan"><fa icon="cog" size="2x"/></mdb-badge>
            <mdb-badge color="orange"><fa icon="btc" size="2x"/></mdb-badge>
            <mdb-badge pill color="teal"><fa icon="heart" size="2x"/></mdb-badge>
            <mdb-badge pill color="green"><fa icon="apple" size="2x"/></mdb-badge>
            <mdb-badge pill color="purple"><fa icon="users" size="2x"/></mdb-badge>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBadge } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbBadge
            }
          }
        </script>

Chips

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 
        
            
          <template>
            <div>
              <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.webp" alt="Contact Person" waves> John Doe</mdb-chip>
              <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/avatar-10.webp" alt="Contact Person" size="md" waves> Anna Smith</mdb-chip>
              <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp" alt="Contact Person" size="lg" waves> Lara Lim</mdb-chip>
            </div>
          </template>
        
        
    
        
            
          <script>
            import { mdbChip } from 'mdbvue';
            export default {
              name: 'BadgePage',
              components: {
                mdbChip
              }
            }
          </script>

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 
        
            
          <template>
            <mdb-chip color="pink lighten-4" close> Tag 220 </mdb-chip>
          </template>
        
        
    
        
            
          <script>
            import { mdbChip } from 'mdbvue';
            export default {
              name: 'BadgePage',
              components: {
                mdbChip
              }
            }
          </script>

Colorful chips MDB Pro component

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 color
Peach color
Purple color
Blue color 
        
            
          <template>
            <div>
              <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/img(7).webp" alt="Contact Person"> Caroline Smith</mdb-chip>
              <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/img(28).webp" alt="Contact Person" color="cyan darken-2" text="white" size="md"> Martha Lores</mdb-chip>
              <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/img(21).webp" alt="Contact Person" color="success-color" text="white" size="lg">The Sylvester</mdb-chip>
              <mdb-chip color="teal lighten-2" text="white" close>Martha</mdb-chip>
              <mdb-chip color="indigo lighten-4" text="indigo" size="md" close>24.08.2016</mdb-chip>
              <mdb-chip gradient="aqua" text="white" size="lg" close :handle-close="baba">Aqua gradient</mdb-chip>
            </div>
          </template>
        
        
    
        
            
          <script>
            import { mdbChip } from 'mdbvue';
            export default {
              name: 'BadgePage',
              components: {
                mdbChip
              }
            }
          </script>

Chip input MDB Pro component

Adding tags

Type a new chip input and press the enter key to add it - you can later delete chips with the backspace key or the x button.

        
            
          <template>
            <mdb-chip-input placeholder="+Tag"/>
          </template>
        
        
    
        
            
          <script>
            import { mdbChipInput } from 'mdbvue';
            export default {
              name: 'BadgePage',
              components: {
                mdbChipInput
              }
            }
          </script>

Two-way data binding

Use v-model directive for two-way data binding

        
            
          <template>
            <mdb-chip-input v-model="['Tag 1', 'Tag 2']"/>
          </template>
        
        
    
        
            
          <script>
            import { mdbChipInput } from 'mdbvue';
            export default {
              name: 'BadgePage',
              components: {
                mdbChipInput
              }
            }
          </script>

Button

For some reasons, the enter key might not always be available - in this case you can provide an additional button to add your chips - just set the property btn to true

        
            
            <template>
              <mdb-chip-input btn/>
            </template>
          
        
    
        
            
            <script>
              import { mdbChipInput } from 'mdbvue';
              export default {
                name: 'BadgePage',
                components: {
                  mdbChipInput
                }
              }
            </script>

Vue Badge - API

In this section you will find advanced information about the Badge component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
      <script>
        import { mdbBadge } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
tag String 'span' Changes badge's wrapper tag <mdb-badge tag="p" />
color String Changes badge's color <mdb-badge color="danger-color" />
pill Boolean false Changes badge into pill <mdb-badge pill />

Chip - API

In this section you will find advanced information about the Chip component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
      <script>
        import { mdbChip } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
tag String 'div' Changes chip's wrapper tag <mdb-chip tag="p" />
src String Set's a source of an image <mdb-chip src="..." />
alt String Sets img's alt attribute <mdb-chip src="..." alt="..." />
color String Sets a chip's color <mdb-chip color="danger" />
text String Sets a text's color <mdb-chip color="danger" text="red"/>
gradient String Sets a chip's background to a gradient <mdb-chip gradient="aqua"/>
size String Changes a chip's size <mdb-chip size="lg"/>
waves Boolean Add waves effect to the chip <mdb-chip waves/>
close Boolean Displays a closing icon <mdb-chip close/>
handleClose Function Handler for click event on the closing button <mdb-chip close handleClose="handler"/>

Chip Input - API

In this section you will find advanced information about the Chip Input component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
      <script>
        import { mdbChipInput } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
tag String 'div' Changes chip's wrapper tag <mdb-chip-input tag="p" />
value Array Array of chips <mdb-chip-input :value="[...]" />
placeholder String Sets input's placeholder <mdb-chip-input placeholder="..." />
chipColor String Sets a chip's color <mdb-chip-input color="danger" />
chipText String Sets a text's color <mdb-chip-input color="danger" chipText="red"/>
chipGradient String Sets a chip's background to a gradient <mdb-chip-input chip-gradient="aqua"/>
chipSize String Changes a chip's size <mdb-chip-input chip-size="lg"/>
waves Boolean Add waves effect to the chip <mdb-chip-input waves/>
btn Boolean Displays an add button <mdb-chip-input btn/>