Status Badge

Configurable status indicator badge

SaaSData Display

Overview

StatusBadge renders a status label with an optional colored dot indicator. It accepts a generic status key and a configuration map, making it fully customizable for any domain-specific status taxonomy.

Usage

import { StatusBadge } from "@leanicon/web-builder-library/saas";

const statusConfig = {
  active: { label: "Active", bg: "bg-success/10", text: "text-success", dot: "bg-success" },
  inactive: { label: "Inactive", bg: "bg-gray-100", text: "text-gray-800", dot: "bg-gray-500" },
};

<StatusBadge status="active" statusConfig={statusConfig} />;

Variants

Default

Pending

Dark

Pending

All Order Statuses

PendingProcessingShippedDeliveredCancelled

Health Statuses

HealthyDegradedDown

Without Dot

Processing

Small Size

Delivered

Large Size

Shipped

All Sizes

HealthyHealthyHealthy

Props

Name	Type	Default	Required
`status`	`string`	—	Yes
`statusConfig`	`Record<TStatus, StatusConfig>`	—	Yes
`size`	`enum`	`md`	No
`showDot`	`boolean`	`true`	No