Components / Display

Badge

A compact status or category label.

Preview

defaultsecondaryoutlinesuccesswarningdestructive

Use cases

Workflow state

Show whether a review is pending, approved, or blocked beside its title.

Small count

Pair a category label with a count in a table cell or list row.

Usage example

Vue

<script setup lang="ts">
import Badge from './components/ui/badge/Badge.vue'
</script>

<template>
  <Badge>New</Badge>
  <Badge variant="secondary" aria-label="Draft, 3 items">
    Draft
    <template #suffix><span aria-hidden="true">3</span></template>
  </Badge>
  <Badge variant="success">
    <template #prefix>
      <span aria-hidden="true" class="size-1.5 rounded-full bg-current" />
    </template>
    Live
  </Badge>
  <Badge variant="warning">Pending</Badge>
  <Badge variant="destructive">Blocked</Badge>
  <Badge variant="outline">Preview</Badge>
</template>

More examples

Review status

Use a word as well as color to communicate the state.

Review status

<script setup lang="ts">
import Badge from './components/ui/badge/Badge.vue'
</script>

<template>
  <p>Change request <Badge variant="warning">Awaiting review</Badge></p>
</template>

Count with context

A suffix can hold a decorative count when the accessible name carries the full meaning.

Count with context

<script setup lang="ts">
import Badge from './components/ui/badge/Badge.vue'
</script>

<template>
  <Badge variant="secondary" aria-label="3 unread messages">
    Unread <template #suffix><span aria-hidden="true">3</span></template>
  </Badge>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Badge
Name	Type	Default or requirement
`variant`	default \| secondary \| outline \| success \| warning \| destructive	default

Add text or decorative icons with the prefix and suffix slots. Each slot also has a data-slot attribute for custom styling.

Implementation notes

Choose variants by meaning consistently across a product, rather than changing a status color from page to page.
A badge describes state; use Button or Link when users need to act.

Accessibility and localization

Always include status text so meaning survives color changes and forced-colors display.