Skip to content
LSD Framework
Components · primitives

Chips, tags, badges. Small surfaces, big chains.

One .lsd-chip component with independent size, tone, and shape modifier classes. 8 style variants · animation chains via .lsd-fx--* — chips are buttons' quieter cousins: stack what you need, drop what you don't.

01 · base

.lsd-chip

Layout + tokens. --chip-bg, --chip-fg, --chip-border, --chip-radius, --chip-pad-x, --chip-pad-y, --chip-font, --chip-icon-size are CSS variables — tones and sizes override them.

sizes

sm / md (default) / lg

Size mods shift padding + font-size only. Tone stays whatever you pair it with.

Small Medium Large 
<span class="lsd-chip lsd-chip--sm">Small</span>
<span class="lsd-chip lsd-chip--lg">Large</span>
tones

solid / outlined / soft / ghost

Tone modifiers swap --chip-bg, --chip-fg, and --chip-border. The shape doesn't change.

Solid Outlined Soft Ghost 
<span class="lsd-chip lsd-chip--outlined">Outlined</span>
<span class="lsd-chip lsd-chip--soft">Soft</span>
shapes

default / pill

Shape mod alters radius. Pill goes fully rounded; default uses an 8px radius.

Default Pill chip Pill outlined 
<span class="lsd-chip lsd-chip--pill">Pill</span>
02 · styles

Eight chip styles

Each is one class. Chainable with .lsd-fx--* animations and any tone/size/shape.

.lsd-chip--closable

Closable

Has a × button on the right. Clicking it removes the chip with a pop-out animation.

Design Motion Tokens 
<span class="lsd-chip lsd-chip--closable">
  Design
  <button class="lsd-chip__close">✕</button>
</span>
.lsd-chip--selectable

Selectable

Toggleable. Selected state fills the chip and reveals a check.

<button class="lsd-chip lsd-chip--outlined
               lsd-chip--selectable"
        aria-pressed="false">
  <span class="lsd-chip__check">✓</span>
  <span>Tokens</span>
</button>
.lsd-chip--avatar

Avatar leading

Leading 22px circular avatar slot (16px sm / 26px lg). Great for user/team filters.

Alice B. Jamie K. 
<span class="lsd-chip lsd-chip--avatar
             lsd-chip--pill">
  <span class="lsd-chip__avatar">AB</span>
  Alice B.
</span>
.lsd-chip--status-dot

Status dot

Leading pulsing dot — online / away / offline. Pairs with .lsd-fx--glow-pulse.

Online Away Offline 
<span class="lsd-chip lsd-chip--status-dot
             lsd-fx--glow-pulse"
      data-status="online">
  <span class="lsd-chip__dot"></span> Online
</span>
.lsd-chip--count

Number badge

Monospace, tabular, tight. For unread counts, version numbers, runtime markers.

12 v0.8 99+ 
<span class="lsd-chip lsd-chip--count
             lsd-chip--pill">12</span>
.lsd-chip--icon-leading

Icon prefix

Decorative leading icon. Sized by --chip-icon-size so it scales with the chip.

Favourite Targeted Settings 
<span class="lsd-chip lsd-chip--icon-leading">
  <span class="lsd-chip__icon">★</span>
  Favourite
</span>
.lsd-chip--gradient-rim

Gradient rim

Animated conic-gradient border. The fill stays calm; the edge does the talking.

Featured New release 
<span class="lsd-chip lsd-chip--gradient-rim
             lsd-chip--pill">Featured</span>
.lsd-chip--glass

Frosted glass

Backdrop-blur with a hairline inset. Reads on busy surfaces.

Glass Frosted 
<span class="lsd-chip lsd-chip--glass
             lsd-chip--pill">Glass</span>
03 · matrix

Tone × style

Tone is orthogonal to style. Each style chip rendered at each tone (~16 chips) — drop one into a tone, it adopts; drop a tone into a style, the style holds.

★ Solid ★ Outlined ★ Soft ★ Ghost Solid live Outlined live Soft away Ghost offline 7 42 v1 99+ A Solid B Outlined C Soft D Ghost
04 · animation

Chain .lsd-fx--*

Animations are universal — the same classes that drive buttons drive chips. The file /framework-dist/lsd-buttons.css hoists them out of the button namespace.

.lsd-fx--lift

Lift on hover

Translates up with a coloured drop shadow. Returns instantly on click.

Lift me 
<span class="lsd-chip lsd-chip--solid
             lsd-fx--lift">Lift me</span>
.lsd-fx--pop

Pop scale

Overshoots on hover, settles back on press. Spring easing.

Pop 
<span class="lsd-chip lsd-chip--soft
             lsd-fx--pop">Pop</span>
.lsd-fx--wobble

Wobble shake

Elastic rotate + translate shake on hover. Brief, plays once.

Wobble 
<span class="lsd-chip lsd-fx--wobble">
  Wobble
</span>
.lsd-fx--shimmer

Shimmer sweep

A specular highlight sweeps across the chip on hover.

Shimmer 
<span class="lsd-chip lsd-chip--solid
             lsd-fx--shimmer">Shimmer</span>
.lsd-fx--glow-pulse

Breathing glow

Continuous accent halo. Great on live-status chips.

Live 
<span class="lsd-chip lsd-chip--solid
             lsd-fx--glow-pulse">Live</span>
.lsd-fx--slide-fill

Slide fill

Accent floods up from the bottom on hover, label flips to dark.

Slide fill 
<span class="lsd-chip lsd-fx--slide-fill
             lsd-chip--pill">Slide fill</span>
05 · draw-in

.lsd-chip--draw-in

Brand-new chip-only entrance. The chip starts at width 0 and animates open to its natural width; the label fades in mid-way. Perfect for chips that appear dynamically — applied filters, new tags, just-added members.

.lsd-chip--draw-in

Click "add filter" to draw a chip in

Each click appends a chip with the draw-in animation. Each chip has a × that pops it back out.

Design 
<span class="lsd-chip lsd-chip--closable
             lsd-chip--draw-in">
  Motion
  <button class="lsd-chip__close">✕</button>
</span>