Badge ported

A small label for status, category, or metadata.

A small label for status, category, or metadata.

Live specimen

Loading demo…

Guidance

When to use

Short statuses next to titles or in table cells, such as Live, Draft, or Failed.
Counts or states that change in place and should morph instead of jump.
Tagging a row with one tone plus an optional icon.

When not to use

Use alert or toast when the message needs a full sentence.
Use chip-group when people toggle the values.
Use stat-card for a headline number with a trend.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/badge

Usage

<script lang="ts">
  import { Badge } from '$lib/components/badge';
  import { Check } from '@lucide/svelte';

  let live = $state(true);
</script>

{#snippet checkIcon()}
  <Check size={12} />
{/snippet}

<Badge tone={live ? 'success' : 'neutral'} icon={live ? checkIcon : undefined}>
  {live ? 'Live' : 'Draft'}
</Badge>

Variants & Examples

Status tones

Five tones cover neutral, success, info, warning, and danger statuses.

<Badge tone="neutral">Draft</Badge>
<Badge tone="success">Live</Badge>
<Badge tone="info">Experimental</Badge>
<Badge tone="warning">Pending</Badge>
<Badge tone="danger">Security Alert</Badge>

With icon

The icon prop is a snippet, so any icon component works — the icon is aria-hidden.

{#snippet checkIcon()}
  <Check size={12} />
{/snippet}

<Badge tone="success" icon={checkIcon}>Live</Badge>

Compact size

size="sm" tightens height and text for dense rows and table cells.

<Badge tone="neutral" size="sm">Small Neutral</Badge>
<Badge tone="success" size="sm">Small Success</Badge>

API Reference

Prop	Type	Default	Description
`tone`	`"neutral" \| "success" \| "info" \| "warning" \| "danger"`	'neutral'	Color of the pill.
`size`	`"sm" \| "md"`	'md'	Height and text size.
`icon`	`Snippet`	–	Leading icon. A different icon component crossfades in.
`children`	`Snippet`	–	Label. String or number children get the rolling text swap; other nodes render as is.
`...props`	`HTMLAttributes<HTMLSpanElement>`	–	Forwarded to the root span.

Accessibility

Renders a plain span, so it is read inline with surrounding text.
The icon is aria-hidden; the label must state the status on its own, not rely on tone color.
Outgoing labels are hidden from assistive tech while they fade, so only the current text is read.
It does not announce changes. Put it inside a live region if a status update must be spoken.

Motion

- A new label rises in with a short blur while the old one lifts away, and the pill width springs to fit. - Passive reflows such as font swaps resize instantly; only a content change springs. - Reduced motion swaps the label with a quick fade and snaps the width.

Notes for AI

Use for short statuses and counts next to titles or in table cells. Use alert or toast for messages with sentences.
Keep the badge mounted and change its children to get the morph; remounting with a new key loses it.

Source of truth: registry/components/badge/badge.tsx