Tag

Tag component supports multiple variants: default, danger, warning, success, muted and pill

<template>
  <DemoGrid>
    <ci-tag
      v-for="variant in variants"
      :key="variant"
      :text="variant"
      :variant="variant"
    />
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      variants: [ 'default', 'danger', 'warning', 'success', 'muted', 'dark', 'pill' ]
    }
  }
}
</script>

Dismissible

Use the dismissible prop to expose an "X" icon that emit's a close event when clicked.

<template>
  <DemoGrid>
    <ci-tag
      v-for="variant in variants"
      :key="variant"
      :text="variant"
      :variant="variant"
      dismissible
    />
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      variants: [ 'default', 'danger', 'warning', 'success', 'muted', 'dark', 'pill' ]
    }
  }
}
</script>

Icons

Use the icon prop to add an icon to your tag.

<template>
  <DemoGrid>
    <ci-tag
      v-for="variant in variants"
      :key="variant"
      :text="variant"
      :variant="variant"
      dismissible
      icon="envelope-open"
    />
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      variants: [ 'default', 'danger', 'warning', 'success', 'muted', 'dark', 'pill' ]
    }
  }
}
</script>

Tooltips

Use the tooltip prop to add a tooltip when the mouse is hovering over the tag.

<template>
  <DemoGrid>
    <ci-tag
      v-for="variant in variants"
      :key="variant"
      :text="variant"
      :variant="variant"
      :tooltip="variant"
    />
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      variants: [ 'default', 'danger', 'warning', 'success', 'muted', 'dark', 'pill' ]
    }
  }
}
</script>