2.7 #Components.chip Chip
Chip is a reusbale component to build query-builder component
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
.sb-chip--placeholder
chip empty state
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
.sb-chip--active
chip active state when user editing chip
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
.sb-chip--error
chip error state
This is a great tag
Match any filters
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
Markup
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="This is a great tag">
<div class="sb-chip__content">
This is a great tag
</div>
</div>
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="Match any filters" role="button">
<div class="sb-chip__content" >
Match <strong>any</strong> filters
</div>
</div>
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!" role="button">
<div class="sb-chip__content">
This is a great lengthyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy tag!
</div>
</div>
Source: components/_chip.scss, line 1