Badge — Svelte

Badge component

Small labels and tags with variants, sizes, and optional pill style. BEM: badge, badge--primary, etc. Text on solid semantic variants (success, warning, error, info) uses the same contrast variables as buttons (--success-text-on-solid, etc.) for theme-aware readability.

Props

• variant (string, optional) — primary, success, warning, error, info
• size (string, optional) — sm, md, lg
• pill (boolean, optional) — Rounded pill style
• class (string, optional) — Additional CSS classes

Variants

Sizes and pill

Usage

<script>
  import Badge from './components/svelte/Badge.svelte';
</script>

<Badge variant="primary">New</Badge>
<Badge variant="success" size="sm">Active</Badge>
<Badge variant="error" pill>Urgent</Badge>