s-m-r-t

Badge

Small status indicator with color variants. Perfect for labeling, categorizing, or showing status information.

Installation

typescript 
import { Badge } from '@happyvertical/smrt-svelte';

Basic Usage

The default badge style with neutral colors.

Default
svelte 
<Badge>Default</Badge>

Variants

Choose from semantic color variants for different contexts.

Default Primary Success Warning Error Info
svelte 
<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>

Sizes

Two size options: small and medium (default).

Small Medium
svelte 
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>

Use Cases

Common patterns for using badges in your application.

Active Pending Expired New Featured
svelte 
<!-- Status indicators -->
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Expired</Badge>

<!-- Labels and tags -->
<Badge variant="primary">New</Badge>
<Badge variant="info">Featured</Badge>

Props

PropTypeDefaultDescription
variant 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info''default'Visual style variant
size 'sm' | 'md''md'Badge size

TypeScript

typescript 
import { Badge } from '@happyvertical/smrt-svelte';

type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
type BadgeSize = 'sm' | 'md';

interface Props {
  variant?: BadgeVariant;
  size?: BadgeSize;
  children?: Snippet;
}