Copied content to clipboard.

All chips

Default
With icon
With delete icon
With icon and delete icon
Default
With icon
With delete icon
With icon and delete icon
Default
With icon
With delete icon
With icon and delete icon

Default chip

Example

    <div class="pb-chip">
        <div class="pb-chip_label">Default</div>
    </div>
    <div class="pb-chip pb-chip--active">
        <div class="pb-chip_label">Active</div>
    </div>
    <div class="pb-chip pb-chip--outline">
        <div class="pb-chip_label">Outline</div>
    </div>
    <div class="pb-chip pb-chip--square">
        <div class="pb-chip_label">Square</div>
    </div>
Default
Active
Outline
Square

Chip with icon

Example

    <div class="pb-chip">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>
        <div class="pb-chip_label">With icon</div>
    </div>
With icon

Chip with delete icon

Example

    <div class="pb-chip">
        <div class="pb-chip_label">With delete icon</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--invert
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_close"/>
</svg>
    </div>
With delete icon

Chip with icon and delete icon

Example

    <div class="pb-chip">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_filter_list"/>
</svg>
        <div class="pb-chip_label">With icon and delete icon</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--invert
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_close"/>
</svg>
    </div>
With icon and delete icon