RoleBadge

Display user roles as styled badges with automatic color coding.

Installation

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

Basic Usage

svelte 
<RoleBadge role="Admin" />
<RoleBadge role="Editor" />
<RoleBadge role="Viewer" />

Variants

svelte 
<RoleBadge role="Admin" variant="primary" />
<RoleBadge role="Admin" variant="secondary" />
<RoleBadge role="Admin" variant="outline" />

Sizes

svelte 
<RoleBadge role="Admin" size="sm" />
<RoleBadge role="Admin" size="md" />
<RoleBadge role="Admin" size="lg" />

Props

PropTypeDefaultDescription
role *string-Role name to display
variant 'primary' | 'secondary' | 'outline''primary'Visual style variant
size 'sm' | 'md' | 'lg''md'Badge size

TypeScript

typescript 
interface Props {
  role: string;
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
}