Phi / Badge

Preview

<script setup>
import { Badge } from "@dicehub/phi/components/badge";
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge variant="primary">Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="error">Error</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="beta">Beta</Badge>
  </div>
</template>

Import

Use the root package while prototyping, or the component entrypoint for granular imports.

import { Badge } from "@dicehub/phi";
// or use the component entrypoint:
// import { Badge } from "@dicehub/phi/components/badge";

Usage

<script setup>
import { Badge } from "@dicehub/phi/components/badge";
</script>

<template>
  <Badge variant="secondary">New</Badge>
  <Badge variant="success">Active</Badge>
  <Badge variant="beta">Beta</Badge>
</template>

Badge renders a native span. Use it for short labels, not as an interactive control. Wrap it in Link when it navigates.

Examples

Semantic Variants

Use semantic variants when the label communicates status or intent.

<script setup>
import { Badge } from "@dicehub/phi/components/badge";
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge variant="primary">Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="error">Error</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="beta">Beta</Badge>
  </div>
</template>

Color Variants

Use color variants when the label is categorical and the meaning comes from nearby content.

<script setup>
import { Badge } from "@dicehub/phi/components/badge";
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Badge variant="neutral">Neutral</Badge>
    <Badge variant="red">Red</Badge>
    <Badge variant="orange">Orange</Badge>
    <Badge variant="green">Green</Badge>
    <Badge variant="teal">Teal</Badge>
    <Badge variant="blue">Blue</Badge>
    <Badge variant="purple">Purple</Badge>
    <Badge variant="teal-subtle">Teal subtle</Badge>
  </div>
</template>

In A Sentence

<script setup>
import { Badge } from "@dicehub/phi/components/badge";
</script>

<template>
  <p>
    Workers <Badge variant="secondary">New</Badge>
  </p>
</template>

With An Icon

Pass a Vue icon component through icon to render it before the label.

<script setup>
import { PhCheckCircle } from "@phosphor-icons/vue";
import { Badge } from "@dicehub/phi/components/badge";
</script>

<template>
  <Badge :icon="PhCheckCircle" :icon-props="{ weight: 'fill' }" variant="success">
    Verified
  </Badge>
</template>

Linked Badge

Wrap a Badge in Link to make it navigable. The badge gains a ring when its link is hovered.

<script setup>
import { Badge } from "@dicehub/phi/components/badge";
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <Link href="/docs/components/badge#api" variant="plain">
    <Badge variant="outline">View API</Badge>
  </Link>
</template>

API

Prop	Type	Default	Description
`icon`	`Component`	`-`	Renders this icon component before the badge label.
`iconProps`	`Record<string, unknown>`	`{}`	Passes attributes to the icon component.
`variant`	`"primary" \| "secondary" \| "error" \| "warning" \| "success" \| "info" \| "outline" \| "beta" \| "red" \| "orange" \| "green" \| "teal" \| "teal-subtle" \| "blue" \| "purple" \| "neutral" \| "destructive"`	`"primary"`	Sets the badge color and semantic intent.