Data Display

Badge

Compact non-interactive label that annotates an adjacent element with a short status, count, or category.

import { Badge } from '@lostgradient/cinder/badge';
billinglabelindicatorsubscription
01

Overview

A small inline label for status, category, or count display.

Use Badge for attached counts, statuses, and compact annotations; use Chip mode="display" when the item is an issue label or tag.

Usage

svelte 
<script lang="ts">
  import Badge from '@lostgradient/cinder/badge';
</script>

<Badge variant="success">Published</Badge>
Live preview
02

When to use

Use when
  • Annotating a value with a short status word like "new" or "beta".
  • Displaying a numeric count next to an icon or title.
  • Displaying the billing state of a subscription in a dashboard, invoice list, or account settings page.
  • Annotating a plan name, customer row, or invoice line with its current payment lifecycle state.
Avoid when
  • The label must be interactive or removable — use chip instead.
  • Showing only a colored dot for presence — use status-dot instead.
03

Examples

Badge sizes

Extra small, small, and medium sizes.

Badge variants

All five semantic variant styles.

04

Props

Props for badge
NameTypeDefaultDescription
variant 'neutral''success''warning''danger''info''accent' 'neutral'
size 'xs' | 'sm' | 'md' 'md'
monospace boolean false Render the badge label in a monospace font.
subscriptionState discriminated-union Render a standardized subscription lifecycle badge without hand-wiring tone, icon, and label.
children snippet Required badge content unless subscriptionState is provided; optional content override for the subscription preset label.