Badges - Launchpad

Solid Badges

Primary Secondary Success Danger Warning Info Dark Light

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

Soft Badges

Primary Secondary Success Danger Warning Info Dark Light

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

Outline Badges

Primary Secondary Success Danger Warning Info Dark Light

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

Sizes

Add .lp-badge--sm or .lp-badge--lg for size variants.

Small Default Large

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-badge--sm</code> or <code class="lp-text-danger">.lp-badge--lg</code> for size variants.</p>
<div class="lp-demo-row lp-items-end">
    <span class="lp-badge lp-badge--primary lp-badge--sm">Small</span>
    <span class="lp-badge lp-badge--primary">Default</span>
    <span class="lp-badge lp-badge--primary lp-badge--lg">Large</span>
</div>
<div class="lp-demo-row lp-items-end lp-mt-3">
    <span class="lp-badge lp-badge--soft-success lp-badge--sm">Small</span>
    <span class="lp-badge lp-badge--soft-success">Default</span>
    <span class="lp-badge lp-badge--soft-success lp-badge--lg">Large</span>
</div>

Pill Badges

Badges are pill-shaped by default. Add .lp-badge--pill if you need to ensure it explicitly.

Primary Success Soft Danger Outline Info

<p class="lp-text-sm lp-text-muted lp-mb-3">Badges are pill-shaped by default. Add <code class="lp-text-danger">.lp-badge--pill</code> if you need to ensure it explicitly.</p>
<div class="lp-demo-row">
    <span class="lp-badge lp-badge--primary lp-badge--pill">Primary</span>
    <span class="lp-badge lp-badge--success lp-badge--pill">Success</span>
    <span class="lp-badge lp-badge--soft-danger lp-badge--pill">Soft Danger</span>
    <span class="lp-badge lp-badge--outline-info lp-badge--pill">Outline Info</span>
</div>

Badges with Icons

check Verified close Rejected schedule Pending fiber_new New star Featured

<div class="lp-demo-row">
    <span class="lp-badge lp-badge--success"><span class="material-symbols-outlined">check</span> Verified</span>
    <span class="lp-badge lp-badge--danger"><span class="material-symbols-outlined">close</span> Rejected</span>
    <span class="lp-badge lp-badge--warning"><span class="material-symbols-outlined">schedule</span> Pending</span>
    <span class="lp-badge lp-badge--info"><span class="material-symbols-outlined">fiber_new</span> New</span>
    <span class="lp-badge lp-badge--soft-primary"><span class="material-symbols-outlined">star</span> Featured</span>
</div>

Dot Indicators

Add .lp-badge--dot for a small circular dot indicator.

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-badge--dot</code> for a small circular dot indicator.</p>
<div class="lp-demo-row">
    <span class="lp-badge lp-badge--primary lp-badge--dot"></span>
    <span class="lp-badge lp-badge--secondary lp-badge--dot"></span>
    <span class="lp-badge lp-badge--success lp-badge--dot"></span>
    <span class="lp-badge lp-badge--danger lp-badge--dot"></span>
    <span class="lp-badge lp-badge--warning lp-badge--dot"></span>
    <span class="lp-badge lp-badge--info lp-badge--dot"></span>
    <span class="lp-badge lp-badge--dark lp-badge--dot"></span>
    <span class="lp-badge lp-badge--light lp-badge--dot"></span>
</div>

Pulse Animation

Add .lp-badge--pulse for an animated pulse effect. Great for drawing attention.

Live Online

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-badge--pulse</code> for an animated pulse effect. Great for drawing attention.</p>
<div class="lp-demo-row lp-gap-5">
    <span class="lp-badge lp-badge--danger lp-badge--dot lp-badge--pulse"></span>
    <span class="lp-badge lp-badge--success lp-badge--dot lp-badge--pulse"></span>
    <span class="lp-badge lp-badge--primary lp-badge--dot lp-badge--pulse"></span>
    <span class="lp-badge lp-badge--warning lp-badge--dot lp-badge--pulse"></span>
    <span class="lp-badge lp-badge--danger lp-badge--pulse">Live</span>
    <span class="lp-badge lp-badge--success lp-badge--pulse">Online</span>
</div>

Status Badges

Use .lp-status-badge for text labels with a colored dot indicator.

Online Away Busy Offline Unknown

<p class="lp-text-sm lp-text-muted lp-mb-3">Use <code class="lp-text-danger">.lp-status-badge</code> for text labels with a colored dot indicator.</p>
<div class="lp-demo-row">
    <span class="lp-status-badge lp-status-badge--online">Online</span>
    <span class="lp-status-badge lp-status-badge--away">Away</span>
    <span class="lp-status-badge lp-status-badge--busy">Busy</span>
    <span class="lp-status-badge lp-status-badge--offline">Offline</span>
    <span class="lp-status-badge">Unknown</span>
</div>

Count Badges

Use .lp-badge-count for notification counts. Wrap with .lp-badge-wrapper to position on icons.

notifications 3

mail 12

shopping_cart 5

99+

Small count + dot on wrapper

chat 2

person

<p class="lp-text-sm lp-text-muted lp-mb-3">Use <code class="lp-text-danger">.lp-badge-count</code> for notification counts. Wrap with <code class="lp-text-danger">.lp-badge-wrapper</code> to position on icons.</p>
<div class="lp-demo-row lp-gap-5">
    <div class="lp-badge-wrapper lp-badge-wrapper--top-right">
        <span class="material-symbols-outlined" style="font-size:24px">notifications</span>
        <span class="lp-badge-count">3</span>
    </div>
    <div class="lp-badge-wrapper lp-badge-wrapper--top-right">
        <span class="material-symbols-outlined" style="font-size:24px">mail</span>
        <span class="lp-badge-count lp-badge-count--primary">12</span>
    </div>
    <div class="lp-badge-wrapper lp-badge-wrapper--top-right">
        <span class="material-symbols-outlined" style="font-size:24px">shopping_cart</span>
        <span class="lp-badge-count lp-badge-count--success">5</span>
    </div>
    <div class="lp-badge-wrapper lp-badge-wrapper--top-right">
        <button class="lp-btn lp-btn--primary lp-btn--avatar">HV</button>
        <span class="lp-badge-count">99+</span>
    </div>
</div>
<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-mt-4 lp-mb-2">Small count + dot on wrapper</p>
<div class="lp-demo-row lp-gap-5">
    <div class="lp-badge-wrapper lp-badge-wrapper--top-right">
        <span class="material-symbols-outlined" style="font-size:24px">chat</span>
        <span class="lp-badge-count lp-badge-count--sm">2</span>
    </div>
    <div class="lp-badge-wrapper lp-badge-wrapper--top-right">
        <span class="material-symbols-outlined" style="font-size:24px">person</span>
        <span class="lp-badge lp-badge--success lp-badge--dot"></span>
    </div>
</div>

Badge Positioning

Position badges in any corner using .lp-badge-wrapper--{position}.

3

5

<p class="lp-text-sm lp-text-muted lp-mb-3">Position badges in any corner using <code class="lp-text-danger">.lp-badge-wrapper--{position}</code>.</p>
<div class="lp-demo-row lp-gap-5">
    <div class="lp-badge-wrapper lp-badge-wrapper--top-right">
        <button class="lp-btn lp-btn--outline-secondary lp-btn--icon"><span class="material-symbols-outlined lp-icon-sm">notifications</span></button>
        <span class="lp-badge-count">3</span>
    </div>
    <div class="lp-badge-wrapper lp-badge-wrapper--top-left">
        <button class="lp-btn lp-btn--outline-secondary lp-btn--icon"><span class="material-symbols-outlined lp-icon-sm">mail</span></button>
        <span class="lp-badge-count lp-badge-count--primary">5</span>
    </div>
    <div class="lp-badge-wrapper lp-badge-wrapper--bottom-right">
        <button class="lp-btn lp-btn--outline-secondary lp-btn--icon"><span class="material-symbols-outlined lp-icon-sm">person</span></button>
        <span class="lp-badge lp-badge--success lp-badge--dot"></span>
    </div>
    <div class="lp-badge-wrapper lp-badge-wrapper--bottom-left">
        <button class="lp-btn lp-btn--outline-secondary lp-btn--icon"><span class="material-symbols-outlined lp-icon-sm">chat</span></button>
        <span class="lp-badge lp-badge--danger lp-badge--dot lp-badge--pulse"></span>
    </div>
</div>

CSS Class Reference

Base

Class	Description
`.lp-badge`	Base badge class

Color Variants (8 colors × 3 styles)

Class	Description
`.lp-badge--{color}`	Solid — primary, secondary, success, danger, warning, info, dark, light
`.lp-badge--soft-{color}`	Subtle tinted background
`.lp-badge--outline-{color}`	Bordered, transparent background

Sizes

Class	Description
`.lp-badge--sm`	Small badge
`(default)`	No class needed
`.lp-badge--lg`	Large badge

Shapes & Effects

Class	Description
`.lp-badge--pill`	Fully rounded (default is already rounded)
`.lp-badge--dot`	Small circular dot indicator
`.lp-badge--pulse`	Animated pulse effect

Count Badge

Class	Description
`.lp-badge-count`	Notification count (default: danger red)
`.lp-badge-count--{color}`	Count in primary, success, warning, info, secondary
`.lp-badge-count--sm`	Smaller count badge

Wrapper & Positioning

Class	Description
`.lp-badge-wrapper`	Container for positioning badges on elements
`.lp-badge-wrapper--top-right`	Position badge top-right
`.lp-badge-wrapper--top-left`	Position badge top-left
`.lp-badge-wrapper--bottom-right`	Position badge bottom-right
`.lp-badge-wrapper--bottom-left`	Position badge bottom-left

Status Badge

Class	Description
`.lp-status-badge`	Text label with colored dot indicator
`.lp-status-badge--online`	Green dot (online)
`.lp-status-badge--away`	Yellow dot (away)
`.lp-status-badge--busy`	Red dot (busy)
`.lp-status-badge--offline`	Gray dot (offline)