Chips

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

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-text-danger">.lp-chip--sm</code> or <code class="lp-text-danger">.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>

Icon Left

Place a .material-symbols-outlined icon before the label text.

face User check_circle Verified error Error info Info warning Warning

<p class="lp-text-sm lp-text-muted lp-mb-3">Place a <code class="lp-text-danger">.material-symbols-outlined</code> icon before the label text.</p>
<div class="lp-demo-row">
    <span class="lp-chip lp-chip--primary"><span class="material-symbols-outlined">face</span> User</span>
    <span class="lp-chip lp-chip--soft-success"><span class="material-symbols-outlined">check_circle</span> Verified</span>
    <span class="lp-chip lp-chip--outline-danger"><span class="material-symbols-outlined">error</span> Error</span>
    <span class="lp-chip lp-chip--soft-info"><span class="material-symbols-outlined">info</span> Info</span>
    <span class="lp-chip lp-chip--warning"><span class="material-symbols-outlined">warning</span> Warning</span>
</div>

Icon Right

Place the icon after the label text.

Next arrow_forward Done check Link open_in_new Delete delete Settings settings

<p class="lp-text-sm lp-text-muted lp-mb-3">Place the icon after the label text.</p>
<div class="lp-demo-row">
    <span class="lp-chip lp-chip--primary">Next <span class="material-symbols-outlined">arrow_forward</span></span>
    <span class="lp-chip lp-chip--soft-success">Done <span class="material-symbols-outlined">check</span></span>
    <span class="lp-chip lp-chip--outline-info">Link <span class="material-symbols-outlined">open_in_new</span></span>
    <span class="lp-chip lp-chip--soft-danger">Delete <span class="material-symbols-outlined">delete</span></span>
    <span class="lp-chip lp-chip--dark">Settings <span class="material-symbols-outlined">settings</span></span>
</div>

Icon Only

Chips with just an icon, no label text.

favorite check close star bolt

<p class="lp-text-sm lp-text-muted lp-mb-3">Chips with just an icon, no label text.</p>
<div class="lp-demo-row">
    <span class="lp-chip lp-chip--primary"><span class="material-symbols-outlined">favorite</span></span>
    <span class="lp-chip lp-chip--soft-success"><span class="material-symbols-outlined">check</span></span>
    <span class="lp-chip lp-chip--outline-danger"><span class="material-symbols-outlined">close</span></span>
    <span class="lp-chip lp-chip--soft-warning"><span class="material-symbols-outlined">star</span></span>
    <span class="lp-chip lp-chip--info"><span class="material-symbols-outlined">bolt</span></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-text-danger">.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-text-danger">.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-text-danger">.lp-chip--selectable</code> for toggle-able chips. Uses JS to toggle <code class="lp-text-danger">.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-outlined">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-outlined">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-outlined">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-outlined">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-outlined">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