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://cdn.jsdelivr.net/npm/@vuesimple/vs-tag@3.1.6/dist/index.min.js"></script>

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

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

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.