Tailwind

Chips

Interactive elements for actions, selection, or filtering.

Source Page Source

Demo

Chip

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

Action Chips

Use chips to create small related set of actions.

Like Share

State

Dynamically modify chip classes to represent state. See the examples below using this technique.

typescript
$: chipStateClass = (someCondition) ? 'variant-filled-primary' : 'variant-soft-primary';
html
<span class="chip {chipStateClass}">...</span>

Single Selection

red blue green

Multiple Selection

vanilla chocolate strawberry