Chips
TailwindInteractive elements for actions, selection, or filtering.
Stylesheets
Package
Source
Doc
Examples
Actions
Like
Share
Selection
red
green
blue
Multi-Select
vanilla
chocolate
strawberry
Getting Started
Apply .chip to any inline element, such as a span or anchor tag.
<span class="chip">Skeleton</span>Variants
Supports all standard variant styles via .variant-[style]-[color].
<span class="chip variant-filled-primary">Skeleton</span>Filled
primary
secondary
tertiary
success
warning
error
surface
Soft
primary
secondary
tertiary
success
warning
error
surface
Ringed
primary
secondary
tertiary
success
warning
error
surface
Ghost
primary
secondary
tertiary
success
warning
error
surface
Glass
primary
secondary
tertiary
success
warning
error
surface
Active State
Swap out variant styles to reflect changes in state.
$: chipStateClass = (someCondition) ? 'variant-filled-primary' : 'variant-soft-primary';<span class="chip {chipStateClass}">...</span>