Rate this docs

Vue Bootstrap Tags, Labels & Badges

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

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


        <h1>Example heading <mdb-badge color="primary-color">New</mdb-badge></h1>
        <h2>Example heading <mdb-badge color="primary-color">New</mdb-badge></h2>
        <h3>Example heading <mdb-badge color="primary-color">New</mdb-badge></h3>
        <h4>Example heading <mdb-badge color="primary-color">New</mdb-badge></h4>
        <h5>Example heading <mdb-badge color="primary-color">New</mdb-badge></h5>
        <h6>Example heading <mdb-badge color="primary-color">New</mdb-badge></h6>

      

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



        <mdb-btn color="primary">
          Notifications <mdb-badge color="danger-color" class="ml-2">New</mdb-badge>
        </mdb-btn>

      

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.



        <mdb-btn color="primary">
          Notifications <mdb-badge color="danger-color" class="ml-2">New</mdb-badge>
          <span class="sr-only">unread messages</span>
        </mdb-btn>

      

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


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

      

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


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

      


Badges with icons



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

      

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


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


          <mdb-chip color="pink lighten-4" close> Tag 220 </mdb-chip>

        

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


          <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/img(7).jpg" alt="Contact Person"> Caroline Smith</mdb-chip>
          <mdb-chip src="https://mdbootstrap.com/img/Photos/Avatars/img(28).jpg" 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).jpg" 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>

        

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.


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

Setting initial tags

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


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

Tags - API

In this section you will find advanced information about the Tags 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


import { mdbBadge, mdbChip } from 'mdbvue';
      

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 />