Tag

Size variants

SmallMediumLarge

<FuiTag value="1" size="small">Small</FuiTag>
<FuiTag value="2" size="medium">Medium</FuiTag>
<FuiTag value="3" size="large">Large</FuiTag>

Dismissible

<script setup>
import { ref } from 'vue'
const tags = ref(['example'])
</script>

<template>
  <FuiTag v-if="tags.includes('example')" value="example" dismissible @dismiss="tags = tags.filter(t => t !== 'example')">
    Dismiss me
  </FuiTag>
</template>

Disabled

Disabled tag

<FuiTag value="disabled" disabled>Disabled tag</FuiTag>

TagGroup

AppleBananaCherry

<script setup>
import { ref } from 'vue'
const tags = ref(['apple', 'banana'])
</script>

<template>
  <FuiTagGroup>
    <FuiTag v-for="tag in tags" :key="tag" :value="tag" dismissible @dismiss="tags = tags.filter(t => t !== tag)">
      {{ tag }}
    </FuiTag>
  </FuiTagGroup>
</template>

Props

Tag

Prop	Type	Default	Description
value	string	required	Tag value
dismissible	boolean	true	Show dismiss button
disabled	boolean	false	Disabled state
size	small | medium | large	medium	Tag size

TagGroup

Prop	Type	Default	Description
disabled	boolean	false	Disabled state