Tag

Selectable or removable tag.

Import

import { Tag, TagGroup, TagRemoveButton } from '@heroui-vue/vue'

Usage

Frameworks

VueReact Svelte

<template>
  <TagGroup label="Frameworks">
    <Tag selected>Vue</Tag>
    <Tag>React</Tag>
    <Tag variant="surface">
      Svelte
      <TagRemoveButton />
    </Tag>
  </TagGroup>
</template>

<script setup>
import { Tag, TagGroup, TagRemoveButton } from '@heroui-vue/vue'
</script>

API

Prop	Type	Default	Description
selected	boolean	false	Marks the tag selected
variant	'default' | 'surface'	'default'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Tag size