║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Pill description: A flexible badge component designed for a variety of use cases. icon: Pill dependencies:

• https://lucide.dev/ installer: pill

---

Features

• Customizable badge-like component with rounded corners and consistent padding
• Support for avatars with fallback options
• Built-in status indicators with variants (success, error, warning, info) and pulse animation
• Delta indicators for showing changes (increase/decrease)
• Icon support with consistent styling
• Avatar groups with overlapping effect
• Ghost button integration
• Themeable variants

Examples

Avatar

A simple pill with an avatar and text.

<Preview path="pill-avatar" />

Status

A pill with a status indicator and text.

<Preview path="pill-status" />

Button

A pill with a button for dismissal.

<Preview path="pill-button" />

Indicator

Pills with different indicator states.

<Preview path="pill-indicator" />

Delta

Pills showing different delta states.

<Preview path="pill-delta" />

Icon

A pill with an icon and text.

<Preview path="pill-icon" />

Avatar Group

A pill with multiple avatars grouped together.

<Preview path="pill-avatar-group" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║