Kappa / Badge

PrimarySecondaryReady12 warningsFailed

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

<template>
  <div class="status-row">
    <Badge>Primary</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="success">Ready</Badge>
    <Badge variant="warning">12 warnings</Badge>
    <Badge variant="error">Failed</Badge>
  </div>
</template>

Installation

Barrel

import { Badge } from "@dicehub/kappa";

Granular

import { Badge } from "@dicehub/kappa/components/badge";

Usage

Badge renders a non-interactive <span> by default and forwards standard attributes to that element.

Stable

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

<template>
  <Badge>Stable</Badge>
</template>

Examples

Semantic Variants

Prefer semantic variants for application state. Their meaning remains stable when the theme changes.

General

PrimarySecondaryOutlineBeta

Status

InfoSuccessWarningErrorDestructive

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

<template>
  <Badge>Primary</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="beta">Beta</Badge>
  <Badge variant="info">Info</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="error">Error</Badge>
  <Badge variant="destructive">Destructive</Badge>
</template>

Color Variants

Use color variants for categorical data with a legend or text label—not as the only indication of state.

RedOrangeGreenTealTeal subtleBluePurpleNeutral

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

<template>
  <Badge variant="red">Red</Badge>
  <Badge variant="orange">Orange</Badge>
  <Badge variant="green">Green</Badge>
  <Badge variant="teal">Teal</Badge>
  <Badge variant="teal-subtle">Teal subtle</Badge>
  <Badge variant="blue">Blue</Badge>
  <Badge variant="purple">Purple</Badge>
  <Badge variant="neutral">Neutral</Badge>
</template>

With Icons

Mark decorative icons with aria-hidden. Add data-icon="inline-start"or data-icon="inline-end" for optically balanced padding in both directions.

Verified Pinned

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

<template>
  <Badge variant="success">
    <svg data-icon="inline-start" viewBox="0 0 16 16" aria-hidden="true">
      <path d="m3 8 3 3 7-7" />
    </svg>
    Verified
  </Badge>
  <Badge variant="outline">
    Pinned
    <svg data-icon="inline-end" viewBox="0 0 16 16" aria-hidden="true">
      <path d="m5 2 6 6-2 1 3 3-1 1-3-3-1 2-2-10Z" />
    </svg>
  </Badge>
</template>

Link

Set as="a" when the badge navigates. The resulting anchor retains native keyboard and link semantics.

Open run

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

<template>
  <Badge as="a" href="/runs/latest">
    Open run
    <svg data-icon="inline-end" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M5 11 11 5M6 5h5v5" />
    </svg>
  </Badge>
</template>

In a Sentence

Badge aligns with surrounding text without changing the sentence semantics.

Simulation Complete in 18m 42s.

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

<template>
  <p>Simulation <Badge variant="success">Complete</Badge> in 18m 42s.</p>
</template>

Numeric Values

Legacy Badge versions accepted value, maxVal, and maxLen. Format numeric content in application code and pass it through the default slot instead.

queued jobs

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

const queuedJobs = 128;
</script>

<template>
  <Badge variant="secondary">
    <span aria-hidden="true">{{ queuedJobs > 99 ? "99+" : queuedJobs }}</span>
    <span class="visually-hidden">{{ queuedJobs }}</span>
  </Badge>
  <span>queued jobs</span>
</template>

<style scoped>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

When visible content is shortened, hide that shortcut from assistive technology and preserve the full value in visually hidden text.

Accessibility

Badge is presentational text; it does not add a role or live-region behavior.
Keep labels short. Badge preserves its complete visible text instead of truncating it.
Use meaningful text so state never depends on color or an icon alone.
Decorative icons should use aria-hidden="true".
Use as="a" for navigation. Badge does not render buttons; use Button for actions.
For changing status, place Badge inside an appropriately labelled live region managed by the application.

API Reference

Badge

Forwards remaining attributes and listeners to the rendered element.

Prop	Type	Default	Description
`variant`	`BadgeVariant`	`"primary"`	Selects a semantic or color treatment.
`as`	`"span" \| "a"`	`"span"`	Changes the rendered element while retaining Badge styling and attributes.

Semantic Variants

Variant	Purpose
`primary`	Strong default label or classification.
`secondary`	Quiet supporting metadata.
`outline`	Neutral label on the surrounding surface.
`beta`	Pre-release or experimental availability.
`info`	Informational state.
`success`	Successful or ready state.
`warning`	Caution or degraded state.
`error`	Failed or invalid state.
`destructive`	Destructive state; retained as the solid red compatibility treatment.

Color Variants

Exports

Export	Description
`Badge`	Presentational badge with semantic element composition.
`BADGE_VARIANTS`	Readonly map of supported variant names.
`BADGE_DEFAULT_VARIANT`	The default variant name: primary.
`BADGE_DEFAULT_ELEMENT`	The default rendered element: span.
`isBadgeElement`	Runtime type guard for span and a element names.
`isBadgeVariant`	Runtime type guard for variant strings.
`BadgeVariant`	Union of supported variant names.
`BadgeElement`	Union of the supported span and a element names.
`BadgeProps`	Public as and variant props.