Tag

Stable

A little box containing some texts and a close button

<script setup lang="ts">
import { HTag } from '@holistics/design-system'
</script>

<template>
  <div class="flex">
    <div class="grid grid-cols-2 gap-2">
      <HTag tag="Holistics" />
      <HTag tag="Design System" />
      <HTag
        tag="Holistics"
        icon="canvas"
      />
      <HTag
        tag="Design System"
        icon="palette"
      />
      <HTag
        tag="Holistics"
        icon="canvas"
        closeable
      />
      <HTag
        tag="Design System"
        icon="palette"
        closeable
      />
    </div>
  </div>
</template>

Examples

Themes

<script setup lang="ts">
import { HTag } from '@holistics/design-system'

const themes = ['green', 'blue', 'red', 'orange', 'purple', 'gray', 'white'] as const
</script>

<template>
  <div class="flex gap-2">
    <HTag
      v-for="theme in themes"
      :key="theme"
      tag="Primary"
      :theme="theme"
    />
  </div>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
tag *	string
icon	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
iconRight	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
closeable	boolean
theme	"white" | "blue" | "green" | "red" | "orange" | "purple" | "gray" | `#${string}` = "blue"
rootTag	string
rootIcon	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
rootIconRight	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
disabled	boolean
maxWidthInRem	number
borderStyle	BorderStyle = "solid"

Events

Name	Parameters	Description
@close	[event: MouseEvent | KeyboardEvent]

Slots

Name	Scoped	Description
#root	{}
#default	{}