Chips
Chips are compact elements that represent an input, attribute, or action.
Compact & Interactive!
Interactive filtering
Click to select!
Build chips that users can toggle. The example above uses React state, but you can achieve this with standard CSS classes.
Toggle States!
HTML
<!-- Basic chips -->
<div class="d-flex flex-wrap gap-2">
<span class="badge rounded-pill border px-3 py-2 fw-normal bg-white text-dark">Design</span>
</div>