react-status-pill

react-status-pill

A lightweight, flexible, and customizable status pill (badge) component for React.
Perfect for dashboards, admin panels, SaaS apps, and anywhere you need clean status labels.

✨ Features

• Fully custom labels (no forced statuses)
• Custom colors or preset tones
• Variants: soft, solid, outline
• Sizes: sm, md, lg
• Rounded by default (pill shape)
• Supports className and style for custom CSS
• TypeScript support out of the box
• Zero dependencies (except React)

📦 Installation

npm install react-status-pill

🚀 Basic Usage

import { StatusPill } from "react-status-pill";

function App() {
  return (
    <>
      <StatusPill label="Active" tone="success" />
      <StatusPill label="Blocked" tone="error" />
      <StatusPill label="In Review" tone="warning" />
    </>
  );
}

🎨 Custom Colors

You are not limited to predefined statuses.

<StatusPill label="Deployed" color="#6366F1" />
<StatusPill label="VIP" color="hotpink" />

🧱 Variants

<StatusPill label="Soft" tone="info" variant="soft" />
<StatusPill label="Solid" tone="success" variant="solid" />
<StatusPill label="Outline" tone="error" variant="outline" />

📏 Sizes

<StatusPill label="Small" size="sm" />
<StatusPill label="Medium" size="md" />
<StatusPill label="Large" size="lg" />

🎯 Custom CSS Support

You can style it using your own CSS, Tailwind, or inline styles.

Using className

<StatusPill
  label="Tailwind Styled"
  className="bg-purple-600 text-white px-4 py-1 rounded-full"
/>

Using style

<StatusPill
  label="Custom Style"
  style={{ letterSpacing: "1px", textTransform: "uppercase" }}
/>

📚 Props

Prop Type Required Description

label string ✅ Yes Text inside the pill

color string ❌ No Custom color (overrides tone)

tone success | error | warning | info | neutral ❌ No Preset color helper

size sm | md | lg ❌ No Size of the pill

variant soft | solid | outline ❌ No Visual style

rounded boolean ❌ No Fully rounded pill

className string ❌ No Custom CSS class

style React.CSSProperties ❌ No Inline style override

💡 Why this component?

Most libraries force predefined statuses like success, error, etc.
This component is designed to be domain-agnostic, so it works for:

• Orders: Shipped, Packed, Delivered\
• HR: On Leave, Terminated, Interviewing\
• Finance: Paid, Failed, Refunded\
• DevOps: Deployed, Rolled Back\
• CMS: Draft, Scheduled, Published

You control the label. Always.

🛠 Roadmap (planned)

• Dot variant (● Active)
• Pulse animation for processing
• Icon support
• Polymorphic as prop
• Dark mode enhancements

📄 License

MIT