Edit these docs

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

template
script


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


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


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


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


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

Links

Using the contextual badges with an <a> tag quickly provide actionable badges with hover and focus states.

Default Primary Secondary Success Danger Warning Info Light Dark

template
script


        <template>
          <div>
            <mdb-badge tag="a" href="#" color="primary">Primary</mdb-badge>
            <mdb-badge tag="a" href="#" color="secondary">Secondary</mdb-badge>
            <mdb-badge tag="a" href="#" color="success">Success</mdb-badge>
            <mdb-badge tag="a" href="#" color="danger">Danger</mdb-badge>
            <mdb-badge tag="a" href="#" color="warning">Warning</mdb-badge>
            <mdb-badge tag="a" href="#" color="info">Info</mdb-badge>
          </div>
        </template>


        <script>
          import { mdbBadge } from 'mdbvue';
          export default {
            name: 'BadgePage',
            components: {
              mdbBadge
            }
          }
        </script>


        <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

John Doe

Anna Smith

Lara Lim

Tom Dark

Kate Horwitz

Danny Clark

template
script


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


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

Caroline Smith

Adam Grey

Danny Moore

Daisy Sun

Martha Lores

Alexandra Deyn

Olaf Horwitz

Mary-Kate Dare

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


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


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


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


            <template>
              <mdb-chip-input btn/>
            </template>


            <script>
              import { mdbChipInput } from 'mdbvue';
              export default {
                name: 'BadgePage',
                components: {
                  mdbChipInput
                }
              }
            </script>

Edit these docs

mdbBadge - API

In this section you will find advanced information about the mdbBadge 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 } 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 />`

mdbChip - API

In this section you will find advanced information about the mdbChip 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 { mdbChip } from 'mdbvue';

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

mdbChipInput - API

Import statement


        import { mdbChipInput } from 'mdbvue';

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

Badge

Import statement
Properties

Chips

Import statement
Properties

Chip Input

Import statement
Properties