# ✍️ Badge

Small status or numerical indicator (e.g., "Active", "New", "+5"). Use for counts or short, non-interactive status labels.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.badge.content"
  source="components/dist/registries/dskit.json#badge"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"badge"} activeTab={"content"} />

## Content guidelines

Badges indicate a count or a status qualifier on an item — for example, unread notifications or a new-item label.

### When to use

- To show a numeric count on an item (for example, unread notifications).
- To apply a status qualifier that does not fit inline as a tag.

### Style

- Badge labels are single words or short abbreviations.
- Use standard status vocabulary: New, Updated, Draft, Published, Deprecated.