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.

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

Multiple Selection