Chips
Interactive elements for actions, selection, or filtering.
Actions
Like
Share
Selection
red
blue
Multi-Select
vanilla
chocolate
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>