Pill
A flexible badge component designed for a variety of use cases.
Installation
npx shadcn-svelte@latest add http://adv76.github.io/kibo-svelte/r/pill.json
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.
Status
A pill with a status indicator and text.
Button
A pill with a button for dismissal.
Indicator
Pills with different indicator states.
Delta
Pills showing different delta states.
Icon
A pill with an icon and text.
Avatar Group
A pill with multiple avatars grouped together.