RoleBadge

Display user roles as styled badges with automatic color coding.

Installation

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

Basic Usage

Admin Editor Viewer
svelte 
<RoleBadge role={adminRole} />
<RoleBadge role={editorRole} />
<RoleBadge role={viewerRole} />

Sizes

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

Props

PropTypeDefaultDescription
role *Role-Role to display (from @happyvertical/smrt-users)
size 'sm' | 'md' | 'lg''md'Badge size

TypeScript

typescript 
import type { Role } from '@happyvertical/smrt-users';

interface Props {
  role: Role;
  size?: 'sm' | 'md' | 'lg';
}