Chips
Interactive elements for actions, selection, or filtering.
Demo
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.
$: chipStateClass = (someCondition) ? 'variant-filled-primary' : 'variant-soft-primary';
<span class="chip {chipStateClass}">...</span>