StatusBadge

Status indicator with dot and label.

statusdisplaybadge

Import

import { StatusBadge } from "@/components/ui";

Basic Usage

StatusBadge Preview

ActiveInactivePendingSuccessWarningErrorInfoActiveCustom Label

Code

tsx

<StatusBadge status="success" label="Active" />

Status Types

All available status types

1<div className="flex flex-wrap gap-2">
2  <StatusBadge status="success" label="Active" />
3  <StatusBadge status="warning" label="Pending" />
4  <StatusBadge status="error" label="Failed" />
5  <StatusBadge status="info" label="Processing" />
6  <StatusBadge status="pending" label="Waiting" />
7</div>

Sizes

Available in multiple sizes

1<div className="flex items-center gap-2">
2  <StatusBadge status="success" size="sm" label="Small" />
3  <StatusBadge status="success" size="md" label="Medium" />
4  <StatusBadge status="success" size="lg" label="Large" />
5</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring