Chip

Shows a small piece of information that is separate from the surrounding info and optionally allows interaction.

Markers

@@click

Gives the chip the clickable styles like a button (cursor change on desktop, ripple effect when clicked).

Component Macros

one of $outline/$fill
$color

Preview

Preview Theme

Example

Normal
<ws-flex ws-x="[fl.dir row]">
    <ws-chip ws-x="[$outline] [$color @primary]">
        Filter 1
    </ws-chip>
    <ws-chip ws-x="[$fill] [$color @secondary]">
        Filter 2
    </ws-chip>
    <ws-chip ws-x="[$outline] [$color @warning]">
        Filter 3
    </ws-chip>
</ws-flex>
Clickable
<ws-flex ws-x="[fl.dir row]">
    <ws-chip ws-x="[$outline] [$color @primary] @@click">
        <ws-icon class="bi-x">
            Remove 1
        </ws-icon>
    </ws-chip>
    <ws-chip ws-x="[$outline] [$color @secondary] @@click">
        <ws-icon class="bi-x">
            Remove 2
        </ws-icon>
    </ws-chip>
    <ws-chip ws-x="[$color @warning] [$fill] @@click">
        <ws-icon class="bi-x">
            Remove 3
        </ws-icon>
    </ws-chip>
</ws-flex>