Tag

Usage

import { Tag } from '@hina-ui/vue'

The tag renders a span, with its content in the default slot.

A tag only labels; it has no click, selection or removal. Use Button when a click should trigger something.

<script setup lang="ts">
  import { Tag } from '@hina-ui/vue'
</script>

<template>
  <Tag>Sci-fi</Tag>
</template>

Examples

Variants

Three of them: soft has a tinted background, solid a filled one, and outline only a border. The default is soft.

Tags in the same list should share one variant and rely on tone alone to carry meaning.

<template>
  <Tag>Ongoing</Tag>
</template>

Tones

Six tones. neutral suits categories and attributes; the other five express state: accent for emphasis, success for success, warning for something needing attention, danger for errors or failures, and info for supplementary notes.

<script setup lang="ts">
  import { Inline, Tag } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <Tag tone="neutral">Draft</Tag>
    <Tag tone="accent">Featured</Tag>
    <Tag tone="success">Approved</Tag>
    <Tag tone="warning">In review</Tag>
    <Tag tone="danger">Rejected</Tag>
    <Tag tone="info">All ages</Tag>
  </Inline>
</template>

Sizes

sm suits lists and tables, where it sits comfortably beside body text; md suits the area beside a title on a detail page; lg is 28px high, the same as an sm button.

<template>
  <Tag>Sci-fi</Tag>
</template>

Pill

With pill, both ends become semicircles.

<script setup lang="ts">
  import { Inline, Tag } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <Tag>Default radius</Tag>
    <Tag pill>Pill</Tag>
    <Tag pill variant="solid" tone="accent">Pill</Tag>
  </Inline>
</template>

With icons

Icons go straight into the default slot, before the text, and scale with the tag.

<script setup lang="ts">
  import { Check, CircleAlert, Clock } from '@lucide/vue'
  import { Inline, Tag } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <Tag tone="success">
      <Check />
      Approved
    </Tag>
    <Tag tone="warning">
      <Clock />
      In review
    </Tag>
    <Tag tone="danger" variant="outline">
      <CircleAlert />
      Rejected
    </Tag>
  </Inline>
</template>

Long content

Text inside a tag does not wrap. When the content may be long, give the tag a maximum width and let the text truncate.

<script setup lang="ts">
  import { Tag, Text } from '@hina-ui/vue'
</script>

<template>
  <Tag class="max-w-40" tone="accent">
    <Text as="span" truncate>A very long tag name truncated at the container edge</Text>
  </Tag>
</template>

Element

as changes the rendered tag. A set of tags is a list semantically: use ul for the container and li for each tag. It only changes the tag name and does not turn a tag into a control — a tag that can be clicked or removed is a Chip, not a Tag.

<script setup lang="ts">
  import { Inline, Tag } from '@hina-ui/vue'
</script>

<template>
  <Inline as="ul" gap="xs">
    <Tag as="li">Sci-fi</Tag>
    <Tag as="li">Mystery</Tag>
    <Tag as="li">School</Tag>
  </Inline>
</template>

Accessibility

• The tag is ordinary text with no role, and screen readers read it as body content.
• Colour must not be the only signal; the words themselves should state the status, for example “Rejected” rather than red alone.
• Tags cannot take focus, so keyboard navigation never stops on them.

API

Props

Slots