Prism UI

Project Complete

Ideal for displaying status information, progress indicators, and workflow states with visual feedback.

Installation

Component status-badge not found in registry.

Dependencies

This component requires the following dependencies:

pnpm add framer-motion lucide-react

Examples

Status Types

Completed

Task Complete

In Progress

Working on it

Pending

Waiting

Delayed

Behind Schedule

Animation Control

Animated

Processing

Static

Processing

Common Use Cases

Database MigrationMigrating user data to new schema

Running

API IntegrationThird-party service integration

Live

Security AuditQuarterly security review

Overdue

Feature ReleaseNew dashboard components

Scheduled

Custom Styling

Success

Alert

Usage

Basic Usage

import StatusBadge from "@/components/ui/status-badge"
 
export default function Example() {
  return (
    <StatusBadge status="completed" label="Task Complete" />
  )
}

All Status Types

import StatusBadge from "@/components/ui/status-badge"
 
export default function Example() {
  return (
    <div className="flex flex-wrap gap-2">
      <StatusBadge status="completed" label="Completed" />
      <StatusBadge status="in-progress" label="In Progress" />
      <StatusBadge status="pending" label="Pending" />
      <StatusBadge status="delayed" label="Delayed" />
    </div>
  )
}

With Animation Control

import StatusBadge from "@/components/ui/status-badge"
 
export default function Example() {
  return (
    <div className="flex flex-wrap gap-2">
      <StatusBadge status="in-progress" label="Animated" animated={true} />
      <StatusBadge status="in-progress" label="Static" animated={false} />
    </div>
  )
}

Features

Four predefined status types (completed, in-progress, pending, delayed)
Animated icons with customizable timing
Color-coded styling for each status
Dark mode support
Optional animation control
Hover effects
Customizable styling

Props

Prop	Type	Description	Required	Default
status	`'completed'	'in-progress'	'pending'	'delayed'`
label	`string`	The text label for the status	✓
className	`string`	Additional CSS classes
animated	`boolean`	Enable or disable animations		true

Notes

Built with Framer Motion for smooth animations
Uses Lucide React icons for consistency
Supports both light and dark themes
In-progress status includes pulsing animation
Responsive design with consistent sizing
Accessible with proper color contrast

Customization

The component can be customized using the className prop and supports all standard HTML attributes.

<StatusBadge className="custom-class" />

Status Badge