StatusBadge

Badge Pill

Usage

import { StatusBadge, getStatusColor, getStatusDisplayLabel, getStatusLabel } from '@tryvienna/ui'

<div className="flex flex-wrap gap-2">
  <StatusBadge status="todo" />
  <StatusBadge status="pending" />
  <StatusBadge status="in_progress" />
  <StatusBadge status="active" />
  <StatusBadge status="done" />
  <StatusBadge status="completed" />
  <StatusBadge status="blocked" />
  <StatusBadge status="cancelled" />
  <StatusBadge status="error" />
</div>

Examples

Badge Pill

Badge Pill

<div className="flex flex-wrap gap-2">
  <StatusBadge status="todo" />
  <StatusBadge status="pending" />
  <StatusBadge status="in_progress" />
  <StatusBadge status="active" />
  <StatusBadge status="done" />
  <StatusBadge status="completed" />
  <StatusBadge status="blocked" />
  <StatusBadge status="cancelled" />
  <StatusBadge status="error" />
</div>

Badge Dot

Badge Dot

<div className="flex flex-wrap gap-4">
  <StatusBadge status="active" variant="dot" />
  <StatusBadge status="done" variant="dot" />
  <StatusBadge status="error" variant="dot" />
  <StatusBadge status="pending" variant="dot" />
</div>

Badge Text

Badge Text

<div className="flex flex-wrap gap-4">
  <StatusBadge status="active" variant="text" />
  <StatusBadge status="done" variant="text" />
  <StatusBadge status="blocked" variant="text" />
</div>

Indicators

Indicators

<div className="flex flex-wrap items-center gap-4">
  <div className="flex items-center gap-2">
    <StatusIndicator status="todo" /> <span className="text-sm">Todo</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIndicator status="in_progress" /> <span className="text-sm">In Progress</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIndicator status="done" /> <span className="text-sm">Done</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIndicator status="blocked" /> <span className="text-sm">Blocked</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIndicator status="cancelled" /> <span className="text-sm">Cancelled</span>
  </div>
</div>

Workstream Icons

Workstream Icons

<div className="flex flex-wrap items-center gap-4">
  <div className="flex items-center gap-2">
    <StatusIcon status="ACTIVE" /> <span className="text-sm">Active</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIcon status="PROCESSING" /> <span className="text-sm">Processing</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIcon status="NEEDS_REVIEW" /> <span className="text-sm">Needs Review</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIcon status="COMPLETED_UNVIEWED" /> <span className="text-sm">Completed</span>
  </div>
  <div className="flex items-center gap-2">
    <StatusIcon status="NEEDS_MANUAL_VERIFICATION" />{' '}
    <span className="text-sm">Verification</span>
  </div>
</div>

API Reference

StatusBadge

Prop	Type	Default	Description
status	SemanticStatus | string	-
label	string	-
color	StatusColor	-
variant	'pill' | 'dot' | 'text'	-
size	'sm' | 'md'	-
style	React.CSSProperties	-

getStatusColor

getStatusDisplayLabel

getStatusLabel

Data Attributes

Component	data-slot
StatusBadge	"status-badge"
getStatusColor	"get-status-color"
getStatusDisplayLabel	"get-status-display-label"
getStatusLabel	"get-status-label"