Tag ​

Component Tag.

<Card>
  <Tag text="Orange" />
</Card>

Props ​

• icon icon & iconVariant icon variant, in case you have included more Font Awesome variants. Vuersatile Components only comes with solid bundled. (Default solid), (solid, regular, light, thin, duotone, brands).

<Card>
  <Tag text="Orange" icon="paint-roller" />
</Card>

• color tag color. (Default greyscale), (amber, orange, red, pink, purple, blue, turquoise, green, lime, greyscale).

<Card>
  <Tag text="Orange" icon="paint-roller" color="orange" />
</Card>

• size tag size. (Default s), (s, m).

<Card>
  <Tag text="Orange" icon="paint-roller" color="orange" size="m" />
</Card>

• showCloseButton if Tag is closable. Emits a @close event. Check console for more information.

const colors = ['amber', 'orange', 'red', 'pink', 'purple', 'blue', 'turquoise', 'green', 'lime', 'greyscale']

const closeColor = (colorToRemove) => {
    console.log(colorToRemove)
}

<Card>
    <Tag v-for="color in colors" :key="color" class="mr-xs-2 mb-xs-2" :text="color" icon="paint-roller" :color="color" size="m" showCloseButton @close="closeColor(color)" />
</Card>