H
UI by hampton.io
Back to Components
Feedback

Status Badge

Badge with dot indicator for success, warning, error, info, and pending states.

PropsUsage ExampleVariations
Healthy
Review
Failed
Queued
Pending

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/status-badge.tsx

Installation

Using shadcn CLI

npx shadcn add status-badge --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Feedback Components

Alert Banner

Full-width dismissible banner for announcements with icon and close button.

Announcement Banner

Dismissible banner with icon, message, and optional action button.

Badge

Small badge component with multiple style variants for labels or tags.

Badge Group

Grouped badges for displaying multiple status labels or tags.

Callout

Information callout box with tip, info, warning, and danger variants. Supports collapsible content.

Empty State

Centered empty state placeholder with icon, text, and optional action.