Pills

Fully rounded tag elements for categories, tags, and filters. Taller than badges with more padding.

Solid Pills

PrimarySecondarySuccessDangerWarningInfoDarkLight

<span class="lp-pill lp-pill--primary">Primary</span>
<span class="lp-pill lp-pill--secondary">Secondary</span>
<span class="lp-pill lp-pill--success">Success</span>
<span class="lp-pill lp-pill--danger">Danger</span>
<span class="lp-pill lp-pill--warning">Warning</span>
<span class="lp-pill lp-pill--info">Info</span>
<span class="lp-pill lp-pill--dark">Dark</span>
<span class="lp-pill lp-pill--light">Light</span>

Soft Pills

PrimarySecondarySuccessDangerWarningInfoDarkLight

<span class="lp-pill lp-pill--soft-primary">Primary</span>
<span class="lp-pill lp-pill--soft-secondary">Secondary</span>
<span class="lp-pill lp-pill--soft-success">Success</span>
<span class="lp-pill lp-pill--soft-danger">Danger</span>
<span class="lp-pill lp-pill--soft-warning">Warning</span>
<span class="lp-pill lp-pill--soft-info">Info</span>
<span class="lp-pill lp-pill--soft-dark">Dark</span>
<span class="lp-pill lp-pill--soft-light">Light</span>

Outline Pills

PrimarySecondarySuccessDangerWarningInfoDarkLight

<span class="lp-pill lp-pill--outline-primary">Primary</span>
<span class="lp-pill lp-pill--outline-secondary">Secondary</span>
<span class="lp-pill lp-pill--outline-success">Success</span>
<span class="lp-pill lp-pill--outline-danger">Danger</span>
<span class="lp-pill lp-pill--outline-warning">Warning</span>
<span class="lp-pill lp-pill--outline-info">Info</span>
<span class="lp-pill lp-pill--outline-dark">Dark</span>
<span class="lp-pill lp-pill--outline-light">Light</span>

Sizes

Add .lp-pill--sm or .lp-pill--lg.

Small Default Large

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-pill--sm</code> or <code class="lp-text-danger">.lp-pill--lg</code>.</p>
<div class="lp-demo-row lp-items-end">
    <span class="lp-pill lp-pill--primary lp-pill--sm">Small</span>
    <span class="lp-pill lp-pill--primary">Default</span>
    <span class="lp-pill lp-pill--primary lp-pill--lg">Large</span>
</div>

Pills with Icons

star Featured check_circle Approved priority_high Urgent

<div class="lp-demo-row">
    <span class="lp-pill lp-pill--primary"><span class="material-symbols-outlined">star</span> Featured</span>
    <span class="lp-pill lp-pill--soft-success"><span class="material-symbols-outlined">check_circle</span> Approved</span>
    <span class="lp-pill lp-pill--outline-danger"><span class="material-symbols-outlined">priority_high</span> Urgent</span>
</div>

Closable Pills

Add .lp-pill-close button inside for dismissible pills.

JavaScript React Vue.js Svelte

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-pill-close</code> button inside for dismissible pills.</p>
<div class="lp-demo-row">
    <span class="lp-pill lp-pill--primary">JavaScript <button class="lp-pill-close" onclick="this.parentElement.remove()"></button></span>
    <span class="lp-pill lp-pill--soft-success">React <button class="lp-pill-close" onclick="this.parentElement.remove()"></button></span>
    <span class="lp-pill lp-pill--outline-info">Vue.js <button class="lp-pill-close" onclick="this.parentElement.remove()"></button></span>
    <span class="lp-pill lp-pill--soft-warning">Svelte <button class="lp-pill-close" onclick="this.parentElement.remove()"></button></span>
</div>

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