StatusBadge
Status indicator with pre-defined color schemes for common business domains like invoices, projects, and expenses.
Installation
typescript
import { StatusBadge } from '@happyvertical/smrt-svelte';Basic Usage
Default status badges with automatic coloring.
active pending error
svelte
<StatusBadge status="active" />
<StatusBadge status="pending" />
<StatusBadge status="error" />Invoice Status
Pre-defined colors for invoice workflows.
draft sent viewed paid overdue
svelte
<StatusBadge status="draft" type="invoice" />
<StatusBadge status="sent" type="invoice" />
<StatusBadge status="viewed" type="invoice" />
<StatusBadge status="paid" type="invoice" />
<StatusBadge status="overdue" type="invoice" />Project Status
Colors for project management workflows.
lead quoted active on hold completed
svelte
<StatusBadge status="lead" type="project" />
<StatusBadge status="quoted" type="project" />
<StatusBadge status="active" type="project" />
<StatusBadge status="on_hold" type="project" />
<StatusBadge status="completed" type="project" />Expense Status
Colors for expense tracking.
unbilled billed reimbursed rejected
svelte
<StatusBadge status="unbilled" type="expense" />
<StatusBadge status="billed" type="expense" />
<StatusBadge status="reimbursed" type="expense" />
<StatusBadge status="rejected" type="expense" />Sizes
Available in small, medium, and large sizes.
active active active
svelte
<StatusBadge status="active" size="sm" />
<StatusBadge status="active" size="md" />
<StatusBadge status="active" size="lg" />Outline Variant
Use outline for a lighter appearance.
active pending error
svelte
<StatusBadge status="active" variant="outline" />
<StatusBadge status="pending" variant="outline" />
<StatusBadge status="error" variant="outline" />Custom Label
Override the displayed text while keeping the color scheme.
Complete
svelte
<StatusBadge status="paid" type="invoice" label="Complete" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
status * | string | - | The status value to display |
type | 'default' | 'invoice' | 'project' | 'expense' | 'time' | 'compliance' | 'estimate' | 'default' | Pre-defined color scheme type |
size | 'sm' | 'md' | 'lg' | 'md' | Badge size variant |
variant | 'filled' | 'outline' | 'filled' | Visual variant |
label | string | - | Custom display label (defaults to status value) |
TypeScript
typescript
import { StatusBadge } from '@happyvertical/smrt-svelte';
type StatusType = 'default' | 'invoice' | 'project' | 'expense' | 'time' | 'compliance' | 'estimate';
interface Props {
status: string;
type?: StatusType;
size?: 'sm' | 'md' | 'lg';
variant?: 'filled' | 'outline';
label?: string;
}