[](https://www.npmjs.com/package/@versini/ui-pill) 
!npm package minimized gzipped size>)
> A versatile and accessible React pill component built with TypeScript and TailwindCSS.
The Pill component provides status indicators, badges, and labels with multiple variants and built-in accessibility features. Perfect for displaying statuses, categories, or other categorical information.
- Features
- Installation
- Usage
- 🎯 Multiple Variants: Information, warning, error, and success styles
- ♿ Accessible: Built-in screen reader support with optional descriptions
- 🎨 Customizable: Easy to style and integrate with your design system
- 🌲 Tree-shakeable: Lightweight and optimized for bundle size
- 🔧 TypeScript: Fully typed with comprehensive prop definitions
- 📱 Responsive: Works seamlessly across all device sizes
``bash`
npm install @versini/ui-pill
> Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.
`tsx
import { Pill } from "@versini/ui-pill";
function App() {
return
}
`
`tsx
import { Pill } from "@versini/ui-pill";
function App() {
return (
$3
tsx
import { Pill } from "@versini/ui-pill";function App() {
return (
);
}
`API
$3
| Prop | Type | Default | Description |
| ----------- | ---------------------------------------------------- | --------------- | ------------------------------------------------------- |
| label |
| - | Content of the Pill (required) |
| variant | "information" \| "warning" \| "error" \| "success" | "information" | Theme of the Pill |
| description | string | - | Hidden label for screen readers (2-3 words recommended) |
| className | string | - | CSS class(es) to add to the main component wrapper |Examples
$3
`tsx
import { Pill } from "@versini/ui-pill";function StatusIndicators() {
const users = [
{ name: "Alice", status: "online" },
{ name: "Bob", status: "away" },
{ name: "Charlie", status: "offline" }
];
const getStatusVariant = (status: string) => {
switch (status) {
case "online":
return "success";
case "away":
return "warning";
case "offline":
return "error";
default:
return "information";
}
};
return (
{users.map((user) => (
{user.name}
variant={getStatusVariant(user.status)}
description="User status"
/>
))}
);
}
`$3
tsx
import { Pill } from "@versini/ui-pill";function OrderDashboard() {
const orders = [
{ id: "ORD-001", status: "processing", variant: "information" },
{ id: "ORD-002", status: "shipped", variant: "success" },
{ id: "ORD-003", status: "delayed", variant: "warning" },
{ id: "ORD-004", status: "cancelled", variant: "error" }
];
return (
Recent Orders
{orders.map((order) => (
className="flex justify-between items-center p-3 border rounded"
>
{order.id}
variant={order.variant as any}
description="Order status"
/>
))}
$3
tsx
import { Pill } from "@versini/ui-pill";function CategoryTags() {
const article = {
title: "Getting Started with React",
categories: ["Frontend", "JavaScript", "React", "Tutorial"]
};
return (
{article.title}
{article.categories.map((category) => (
label={category}
variant="information"
description="Article category"
/>
))}
);
}
`$3
tsx
import { Pill } from "@versini/ui-pill";function CustomStyledPills() {
return (
variant="success"
className="font-bold border-2 border-gold-500"
/>
);
}
`$3
tsx
import { Pill } from "@versini/ui-pill";function NotificationBadges() {
return (
variant="error"
description="Unread messages"
className="absolute -top-2 -right-2 min-w-[20px] h-5 text-xs"
/>
variant="warning"
description="New notifications"
className="absolute -top-1 -right-1 w-4 h-4 text-xs flex items-center justify-center"
/>
);
}
``