Badge

Stable

A little (clickable) box containing some texts

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <HBadge label="Badge" />
  </div>
</template>

Examples

Types

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <HBadge
      v-for="type in BADGE_TYPES"
      :key="type"
      :type="type"
      :label="type"
    />
  </div>
</template>

Sizes

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

<template>
  <div class="flex flex-wrap items-end justify-center gap-2">
    <HBadge
      v-for="size in BADGE_SIZES"
      :key="size"
      :size="size"
      :label="size"
    />
  </div>
</template>

API

Pass-through: <button>

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
asDiv	boolean
type	"default" | "info-primary" | "info-secondary" | "success-primary" | "success-secondary" | "warning-primary" | "warning-secondary" | "danger-primary" | "danger-secondary" = "default"
size	"md" | "sm" = "sm"
label	string
icon	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 448 more ...
iconRight	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 448 more ...
active	boolean
disabled	boolean
noIcon	boolean

Slots

Name	Scoped	Description
#default	{}