Chips

Interactive tag elements with close and select functionality. Ideal for filters, selections, and input tags.

Default Chip

Default tag With Icon Closable

<div class="lp-demo-row">
    <span class="lp-chip">Default</span>
    <span class="lp-chip"><span class="material-symbols-rounded">tag</span> With Icon</span>
    <span class="lp-chip">Closable <button class="lp-chip-close"></button></span>
</div>

Solid Chips

PrimarySecondarySuccessDangerWarningInfoDarkLight

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

Soft Chips

PrimarySecondarySuccessDangerWarningInfoDarkLight

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

Outline Chips

PrimarySecondarySuccessDangerWarningInfoDarkLight

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

Sizes

Add .lp-chip-sm or .lp-chip-lg.

Small Default Large

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

Chips with Icons

face User check_circle Verified error Error info Info

<div class="lp-demo-row">
    <span class="lp-chip lp-chip-primary"><span class="material-symbols-rounded">face</span> User</span>
    <span class="lp-chip lp-chip-soft-success"><span class="material-symbols-rounded">check_circle</span> Verified</span>
    <span class="lp-chip lp-chip-outline-danger"><span class="material-symbols-rounded">error</span> Error</span>
    <span class="lp-chip lp-chip-soft-info"><span class="material-symbols-rounded">info</span> Info</span>
</div>

Avatar Chips

Add an .lp-chip-avatar image inside the chip.

John Doe

Jane Smith

Alex

<p class="lp-text-sm lp-text-muted lp-mb-3">Add an <code class="lp-code">.lp-chip-avatar</code> image inside the chip.</p>
<div class="lp-demo-row">
    <span class="lp-chip"><img class="lp-chip-avatar" src="https://i.pravatar.cc/48?img=1" alt="Avatar"> John Doe</span>
    <span class="lp-chip lp-chip-soft-primary"><img class="lp-chip-avatar" src="https://i.pravatar.cc/48?img=5" alt="Avatar"> Jane Smith</span>
    <span class="lp-chip"><img class="lp-chip-avatar" src="https://i.pravatar.cc/48?img=3" alt="Avatar"> Alex <button class="lp-chip-close"></button></span>
</div>

Closable Chips

Chips with .lp-chip-close can be dismissed. Uses the Chip JS component for animated removal.

JavaScript TypeScript Python Ruby Go Rust

<p class="lp-text-sm lp-text-muted lp-mb-3">Chips with <code class="lp-code">.lp-chip-close</code> can be dismissed. Uses the Chip JS component for animated removal.</p>
<div class="lp-demo-row" id="closable-demo">
    <span class="lp-chip" data-lp-component="chip">JavaScript <button class="lp-chip-close"></button></span>
    <span class="lp-chip lp-chip-soft-primary" data-lp-component="chip">TypeScript <button class="lp-chip-close"></button></span>
    <span class="lp-chip lp-chip-soft-success" data-lp-component="chip">Python <button class="lp-chip-close"></button></span>
    <span class="lp-chip lp-chip-soft-danger" data-lp-component="chip">Ruby <button class="lp-chip-close"></button></span>
    <span class="lp-chip lp-chip-soft-warning" data-lp-component="chip">Go <button class="lp-chip-close"></button></span>
    <span class="lp-chip lp-chip-soft-info" data-lp-component="chip">Rust <button class="lp-chip-close"></button></span>
</div>

Selectable / Filter Chips

Add .lp-chip-selectable for toggle-able chips. Uses JS to toggle .lp-chip-selected state.

check Design check Development check Marketing check Sales check Support

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-code">.lp-chip-selectable</code> for toggle-able chips. Uses JS to toggle <code class="lp-code">.lp-chip-selected</code> state.</p>
<div class="lp-demo-row" id="selectable-demo">
    <span class="lp-chip lp-chip-selectable" data-lp-component="chip" data-value="design"><span class="lp-chip-check"><span class="material-symbols-rounded">check</span></span> Design</span>
    <span class="lp-chip lp-chip-selectable" data-lp-component="chip" data-value="dev"><span class="lp-chip-check"><span class="material-symbols-rounded">check</span></span> Development</span>
    <span class="lp-chip lp-chip-selectable lp-chip-selected" data-lp-component="chip" data-value="marketing"><span class="lp-chip-check"><span class="material-symbols-rounded">check</span></span> Marketing</span>
    <span class="lp-chip lp-chip-selectable" data-lp-component="chip" data-value="sales"><span class="lp-chip-check"><span class="material-symbols-rounded">check</span></span> Sales</span>
    <span class="lp-chip lp-chip-selectable" data-lp-component="chip" data-value="support"><span class="lp-chip-check"><span class="material-symbols-rounded">check</span></span> Support</span>
</div>

Disabled Chips

Disabled Primary Soft Success Outline Danger

<div class="lp-demo-row">
    <span class="lp-chip lp-chip-disabled">Disabled</span>
    <span class="lp-chip lp-chip-primary lp-chip-disabled">Primary</span>
    <span class="lp-chip lp-chip-soft-success lp-chip-disabled">Soft Success</span>
    <span class="lp-chip lp-chip-outline-danger lp-chip-disabled">Outline Danger</span>
</div>

CSS Reference

Class	Description
`.lp-chip`	Base chip (neutral border style)
`.lp-chip-{color}`	Solid color variant (primary, secondary, success, danger, warning, info, dark, light)
`.lp-chip-soft-{color}`	Soft/pastel background variant
`.lp-chip-outline-{color}`	Outline/bordered variant
`.lp-chip-sm`	Small size (26px height)
`.lp-chip-lg`	Large size (40px height)
`.lp-chip-avatar`	Avatar image inside chip
`.lp-chip-close`	Close/dismiss button
`.lp-chip-selectable`	Makes chip clickable/toggleable
`.lp-chip-selected`	Selected state (with check indicator)
`.lp-chip-check`	Check icon wrapper (visible when selected)
`.lp-chip-disabled`	Disabled state
`data-lp-component="chip"`	Activate JS close/select behavior