Chips

Tailwind

Interactive elements for actions, selection, or filtering.

Stylesheets

Package

Source

Doc

Actions

Like Share

Selection

red green blue

Multi-Select

vanilla chocolate strawberry

Apply .chip to any inline element, such as a span or anchor tag.

html

<span class="chip">Skeleton</span>

Variants

Append .chip-[color] class to set a variant color.

html

<span class="chip chip-primary">Skeleton</span>

primary secondary tertiary success warning error

Dynamically add .chip-active or .chip-[color]-active classes to show an active state.

let color: string = 'red';

html

<span class="chip" class:chip-active={color === 'red'}>Red</span>

A dedicated input component for accepting multiple values using chips.