Chips

tier 2 — classes

A chip is a thing the user put there and can take away: an applied filter, a chosen recipient, a label attached to a record.

Chip or badge? Ask whether the user can remove it: if they put it there and can take it away it is a chip, and if it reflects data it is a badge.

A set of filters

.chip-set wraps a row of them onto a second line, and the remove button is a real <button> that needs a real name — aria-label="Remove the region filter", never a bare ×. .chip--active is a filter that is on rather than one offered, and .chip-dot has to be coloured from a semantic token in the markup.

Region: EU-West Unpaid only Awaiting stock Last 7 days

<div class="chip-set">
    <span class="chip">
        <span class="chip-label">Region: EU-West</span>
        <button class="chip-dismiss" type="button" aria-label="Remove the region filter">
            <i class="ri-close-line"></i>
        </button>
    </span>
    <span class="chip chip--active">
        <i class="ri-filter-3-line"></i>
        <span class="chip-label">Unpaid only</span>
        <button class="chip-dismiss" type="button" aria-label="Remove the unpaid filter">
            <i class="ri-close-line"></i>
        </button>
    </span>
    <span class="chip">
        <span class="chip-dot" style="background:var(--warn-solid)"></span>
        <span class="chip-label">Awaiting stock</span>
    </span>
    <span class="chip"><span class="chip-label">Last 7 days</span></span>
</div>

A chip's home: the toolbar changes the filter, and the chip row below says what is currently applied and gives each one a way off. Name every remove button after the value it removes.

Pending EU-West Over 48 h old

<div>
    <div class="toolbar">
        <div class="toolbar-filters">
            <input class="form-input toolbar-input" type="search" placeholder="Search orders…" />
            <select class="form-select toolbar-input" aria-label="Region">
                <option selected>EU-West</option>
                <option>EU-Central</option>
            </select>
        </div>
        <span class="toolbar-count">18 of 128</span>
    </div>
    <div class="chip-set" style="margin-top:10px">
        <span class="chip chip--active">
            <span class="chip-dot" style="background:var(--warn-solid)"></span>
            <span class="chip-label">Pending</span>
            <button class="chip-dismiss" type="button" aria-label="Stop filtering by Pending">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip chip--active">
            <span class="chip-label">EU-West</span>
            <button class="chip-dismiss" type="button" aria-label="Stop filtering by EU-West">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip chip--active">
            <span class="chip-label">Over 48 h old</span>
            <button class="chip-dismiss" type="button" aria-label="Stop filtering by age">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <button class="btn btn-sm btn-ghost" type="button">Clear all</button>
    </div>
</div>

Chosen people, in a field

A chip can hold an .avatar as well as a label; .avatar-sm is the size that fits inside the small tier, and .avatar--muted marks an actor that is not a person. The input goes after the chips, not inside them — a field whose value is a set of chips still needs one real labelled control for adding to it.

Notify

AF Alex Fischer RN Rin Nakamura Fulfilment on call

Everyone here is told when the order is dispatched.

<div class="form-field" style="max-width:460px">
    <label class="form-label" for="chip-to">Notify</label>
    <div class="chip-set">
        <span class="chip">
            <span class="avatar avatar-sm">AF</span>
            <span class="chip-label">Alex Fischer</span>
            <button class="chip-dismiss" type="button" aria-label="Do not notify Alex Fischer">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip">
            <span class="avatar avatar-sm">RN</span>
            <span class="chip-label">Rin Nakamura</span>
            <button class="chip-dismiss" type="button" aria-label="Do not notify Rin Nakamura">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <span class="chip">
            <span class="avatar avatar-sm avatar--muted"><i class="ri-group-line"></i></span>
            <span class="chip-label">Fulfilment on call</span>
            <button class="chip-dismiss" type="button" aria-label="Do not notify Fulfilment on call">
                <i class="ri-close-line"></i>
            </button>
        </span>
    </div>
    <input class="form-input" id="chip-to" type="text" placeholder="Add a person or a group…" />
    <p class="form-hint">Everyone here is told when the order is dispatched.</p>
</div>

Two sizes

A chip is interactive, so it takes the control heights rather than a type scale. The default is the small tier, for a filter bar beside a .btn-sm; .chip-lg is the normal tier.

Region: EU-West

<div class="sedna-col sedna-gap-2">
    <div class="sedna-row-wrap">
        <span class="chip">
            <span class="chip-label">Region: EU-West</span>
            <button class="chip-dismiss" type="button" aria-label="Remove the region filter">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <button class="btn btn-sm">Clear all</button>
    </div>
    <div class="sedna-row-wrap">
        <span class="chip chip-lg">
            <span class="chip-label">Region: EU-West</span>
            <button class="chip-dismiss" type="button" aria-label="Remove the region filter">
                <i class="ri-close-line"></i>
            </button>
        </span>
        <button class="btn">Clear all</button>
    </div>
</div>

Chips

A set of filters

What is applied, under the toolbar

Chosen people, in a field

Two sizes