Skip to main content

Badge

Badge

Small label component for status indicators and categorization

Tags: component display status

View Demo

Badges are small labels used to display status, counts, or categorization.

Import​

<script>
  import { Badge } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Badge>Default</Badge>

Props​

Prop Type Default Description
variant 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info' 'default' Visual style variant
size 'default' | 'sm' | 'dot' 'default' Size of the badge
clickable boolean false Enables hover effects for clickable badges
class string - Additional CSS classes
live boolean false When true, adds role="status" and aria-live="polite" for dynamic content announcements
label string - Screen reader-only label providing context for the badge content. Useful for count badges (e.g., "unread messages" for a badge showing "5").

Variants​

Default​

<Badge variant="default">Default</Badge>

Secondary​

<Badge variant="secondary">Secondary</Badge>

Destructive​

<Badge variant="destructive">Destructive</Badge>

Outline​

<Badge variant="outline">Outline</Badge>

Success​

<Badge variant="success">Success</Badge>

Warning​

<Badge variant="warning">Warning</Badge>

Info​

<Badge variant="info">Info</Badge>

Sizes​

<Badge size="sm">Small</Badge>
<Badge size="default">Default</Badge>
<Badge size="dot">1</Badge>
Size Dimensions Use Case
sm Compact padding Inline badges
default Standard padding General use
dot 20x20px circle Notification counts

Clickable Badges​

Enable hover effects for interactive badges:

<Badge clickable onclick={() => console.log('clicked')}>Click me</Badge>

Use Cases​

Status Indicators​

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Expired</Badge>

Notification Counts​

<Badge size="dot" variant="destructive">3</Badge>

Category Tags​

<div class="flex gap-2">
  <Badge variant="secondary">React</Badge>
  <Badge variant="secondary">Svelte</Badge>
  <Badge variant="secondary">TypeScript</Badge>
</div>

With Icons​

<Badge>
  <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
    <circle cx="10" cy="10" r="5" />
  </svg>
  Online
</Badge>

Accessibility​

The Badge component:

  • Uses semantic <span> element
  • Supports focus ring for keyboard navigation when clickable
  • Has proper color contrast ratios
Screen Readers

For status badges, consider using aria-label or visually hidden text to provide context:

<Badge variant="success" aria-label="Status: Active">Active</Badge>

Examples​

Table Status Column​

<td>
  {#if user.status === 'active'}
    <Badge variant="success">Active</Badge>
  {:else if user.status === 'pending'}
    <Badge variant="warning">Pending</Badge>
  {:else}
    <Badge variant="destructive">Inactive</Badge>
  {/if}
</td>

Article Tags​

<article>
  <h2>Article Title</h2>
  <div class="flex gap-1 mt-2">
    {#each article.tags as tag}
      <Badge variant="outline" size="sm">{tag}</Badge>
    {/each}
  </div>
</article>

Version Badge​

<Badge variant="info">v2.0.0</Badge>

New Feature Badge​

<h3>
  Feature Name
  <Badge variant="default" size="sm" class="ml-2">New</Badge>
</h3>
  • Alert - For longer messages and notifications
  • Button - For actions instead of labels
On this page