Tag

A simple vue tag.

GitHub

Demo

Sizes

SmallMediumLarge

Types

PrimarySuccessDangerWarningSecondary

Shapes

NormalPill6

Custom Color

TealGreenOrangeLemon

With Close

SecondaryPrimarySuccessDangerWarning

Install

npm i @vuesimple/vs-tag

Usage

<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

<script>
  import VsTag from '@vuesimple/vs-tag';

  export default {
    components: {
      VsTag,
    },
  };
</script>

CDN

<script src="https://unpkg.com/@vuesimple/vs-tag@<version>/dist/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

// Main/Entry file
app.use(VsTag.plugin);

<template>
  <vs-tag variant="primary"> Primary </vs-tag>
</template>

Nuxt.js

After installation,

• Create a file /plugins/vs-tag.js

  import Vue from 'vue';
  import VsTag from '@vuesimple/vs-tag';
  
  Vue.component('vs-tag', VsTag);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-tag', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <template>
    <vs-tag variant="primary"> Primary </vs-tag>
  </template>

TIP

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsTag from '@vuesimple/vs-tag' & add in components:{VsTag} and use it within component, without globally installing in plugin folder.

Props

Name	Type	Default	Description
variant	String	-	Type of tag to be shown. (primary, secondary, warning, danger)
size	String	medium	Size of tag. (small, medium, large)
is-bold	Boolean	true	Bold text for tag.
is-pill	Boolean	medium	Applies pill styling
is-round	Boolean	medium	Applies styles to round the tag
bg-color	String	-	Applies hex/rgb/text color to tags background color
is-close	Boolean	false	Show close button

Events

Name	Description
click	On close button click (only available if is-close set)

Slots

You can define own item markup via #slot-name:

Name	Description
(default)	Holds the tag content and can contain HTML.