Pills
Fully rounded tag elements for categories, tags, and filters. Taller than badges with more padding.
Solid Pills
PrimarySecondarySuccessDangerWarningInfoDarkLight
Soft Pills
PrimarySecondarySuccessDangerWarningInfoDarkLight
Outline Pills
PrimarySecondarySuccessDangerWarningInfoDarkLight
Sizes
Add .lp-pill--sm or .lp-pill--lg.
Small
Default
Large
Pills with Icons
star Featured
check_circle Approved
priority_high Urgent
Closable Pills
Add .lp-pill-close button inside for dismissible pills.
JavaScript
React
Vue.js
Svelte
CSS Reference
| Class | Description |
|---|---|
.lp-pill | Base pill (fully rounded) |
.lp-pill--{color} | Solid color variant (primary, secondary, success, danger, warning, info, dark, light) |
.lp-pill--soft-{color} | Soft/pastel background variant |
.lp-pill--outline-{color} | Outline/bordered variant |
.lp-pill--sm | Small size (22px height) |
.lp-pill--lg | Large size (32px height) |
.lp-pill-close | Close/dismiss button inside pill |