Labels

Square-cornered uppercase labels for categorization and tagging. Compact with strong typography emphasis.

Solid Labels

Square corners with uppercase text and letter-spacing for emphasis.

PrimarySecondarySuccessDangerWarningInfoDarkLight

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

Soft Labels

PrimarySecondarySuccessDangerWarningInfoDarkLight

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

Sizes

Add .lp-label--sm or .lp-label--lg.

Small Default Large

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

Labels with Icons

fiber_new New science Beta priority_high Critical update Updated

<div class="lp-demo-row">
    <span class="lp-label lp-label--primary"><span class="material-symbols-outlined">fiber_new</span> New</span>
    <span class="lp-label lp-label--soft-success"><span class="material-symbols-outlined">science</span> Beta</span>
    <span class="lp-label lp-label--danger"><span class="material-symbols-outlined">priority_high</span> Critical</span>
    <span class="lp-label lp-label--soft-warning"><span class="material-symbols-outlined">update</span> Updated</span>
</div>

CSS Reference

Class	Description
`.lp-label`	Base label (uppercase, square corners)
`.lp-label--{color}`	Solid color variant (primary, secondary, success, danger, warning, info, dark, light)
`.lp-label--soft-{color}`	Soft/pastel background variant
`.lp-label--sm`	Small size (18px height)
`.lp-label--lg`	Large size (28px height)