# Badge ## Example ```svelte

Primary

default md lg

Secondary

Badge Badge Badge

Colors

Red Yellow Green Blue Indigo Violet Purple Fuchsia Pink Rose Orange Amber Lime Emerald Teal Cyan Sky
``` ## Documentation ## Usage ```svelte Badge ``` ## API Reference ### Badge A small label for status, categories, or metadata. | Prop | Type | Default | Description | |------|------|---------|-------------| | variant | `'primary' | 'primary_shift' | 'primary_shift_2' | 'secondary' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'` | `'primary'` | The visual variant of the badge. | | size | `'sm' | 'md' | 'lg'` | `'sm'` | The size of the badge. | | children | `Snippet` | `-` | The content to display inside the badge. (required) | | class | `string` | `-` | Additional CSS classes to apply. | | ref | `HTMLSpanElement` | `-` | The underlying DOM element. (bindable) |