Data Display

Badge

Display short labels, statuses, or counts. Badges support multiple variants, colors, sizes, icons, and avatars for flexible inline indicators.

Playground

Experiment with different props in real-time.

Badge

Variant

Color

Size

Label

Basic Usage

Import and use the Badge component with a label prop.

Badge

<script lang="ts">
  import { Badge } from 'sv5ui';
</script>

<Badge label="Badge" />

Variants

4 visual styles for different levels of emphasis.

Solid Soft Outline Subtle

<Badge variant="solid" label="Solid" />
<Badge variant="soft" label="Soft" />
<Badge variant="outline" label="Outline" />
<Badge variant="subtle" label="Subtle" />

Sizes

5 sizes from extra small to extra large.

Extra Small Small Medium Large Extra Large

<Badge size="xs" label="Extra Small" />
<Badge size="sm" label="Small" />
<Badge size="md" label="Medium" />
<Badge size="lg" label="Large" />
<Badge size="xl" label="Extra Large" />

Colors

8 semantic color schemes.

Primary Secondary Tertiary Success Warning Error Info Surface

<Badge color="primary" label="Primary" />
<Badge color="secondary" label="Secondary" />
<Badge color="tertiary" label="Tertiary" />
<Badge color="success" label="Success" />
<Badge color="warning" label="Warning" />
<Badge color="error" label="Error" />
<Badge color="info" label="Info" />
<Badge color="surface" label="Surface" />

With Icons

Add icons in various positions using Iconify names.

Featured Next Verified

<!-- Icon only -->
<Badge icon="lucide:check" />

<!-- Leading icon -->
<Badge leadingIcon="lucide:star" label="Featured" />

<!-- Trailing icon -->
<Badge trailingIcon="lucide:arrow-right" label="Next" />

<!-- Both icons -->
<Badge leadingIcon="lucide:circle-check" trailingIcon="lucide:x" label="Verified" />

With Avatar

Display an avatar alongside the badge label using the avatar prop.

John Doe

Jane Smith

<Badge
  label="John Doe"
  avatar={{ src: 'https://i.pravatar.cc/40?img=1', alt: 'John Doe' }}
/>
<Badge
  label="Jane Smith"
  avatar={{ src: 'https://i.pravatar.cc/40?img=5', alt: 'Jane Smith' }}
  color="secondary"
/>

Square Badge

Use the square prop for equal width and height, ideal for counts or single icons.

5 99

<Badge icon="lucide:plus" square />
<Badge label="5" square />
<Badge label="99" square color="error" />

UI Slots

Use the ui prop to override classes on specific internal elements of the Badge.

Slot	Description
`base`	Root badge element — controls shape, padding, shadow, etc.
`label`	Text label wrapper — controls font, spacing, text styles
`leadingIcon`	Icon before the label — controls icon size, color
`trailingIcon`	Icon after the label — controls icon size, color
`leadingAvatar`	Avatar before the label — controls avatar wrapper styles
`leadingAvatarSize`	Avatar size override within the badge

Custom Styled

<Badge
  label="Custom Styled"
  leadingIcon="lucide:star"
  ui={{
    base: 'rounded-full shadow-lg',
    label: 'font-bold tracking-wide',
    leadingIcon: 'text-yellow-400'
  }}
/>

Snippets

Use snippets to fully replace the leading or trailing content with custom markup.

Snippet	Replaces	Description
`children`	`label`	Default slot for custom label content
`leading`	`leadingIcon / avatar`	Custom content before the label — replaces icon and avatar
`trailing`	`trailingIcon`	Custom content after the label — replaces trailing icon

<Badge variant="outline" color="primary">
  {#snippet leading()}
    <div class="flex h-4 w-4 items-center justify-center rounded-full bg-primary">
      <span class="text-[8px] font-bold text-on-primary">AI</span>
    </div>
  {/snippet}
  Claude
  {#snippet trailing()}
    <span class="text-[10px] opacity-60">v4</span>
  {/snippet}
</Badge>

Props

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`'span'`	HTML element to render as
`label`	`string \| number`	`-`	Text content of the badge
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'surface'`	`'primary'`	Color scheme
`variant`	`'solid' \| 'soft' \| 'outline' \| 'subtle'`	`'solid'`	Visual style of the badge
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Badge dimensions
`square`	`boolean`	`false`	Equal width and height
`icon`	`string`	`-`	Icon-only mode (Iconify name)
`leadingIcon`	`string`	`-`	Icon before label
`trailingIcon`	`string`	`-`	Icon after label
`avatar`	`AvatarProps`	`-`	Avatar before label
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override slot classes

AvatarGroup Chip