Chips
A chip is a small rounded choice: a filter that is on or off, a saved view, an applied filter with its count and a way to remove it.
Examples
A filter chip is a toggle button: aria-pressed says whether it is on. A chip that opens a menu is the menu's button.
<button class="chip" type="button" aria-pressed="true"><i class="bi bi-eye" aria-hidden="true"></i>Published</button>
<button class="chip" type="button" aria-pressed="false"><i class="bi bi-pencil-square" aria-hidden="true"></i>Drafts</button>
<button class="chip" type="button" aria-pressed="false"><i class="bi bi-translate" aria-hidden="true"></i>Language: any</button>
<button class="chip" type="button" commandfor="chip-site-menu" command="toggle-popover" aria-haspopup="menu"><i class="bi bi-globe2" aria-hidden="true"></i>Site: all<i class="bi bi-chevron-down" aria-hidden="true"></i></button>
<div id="chip-site-menu" class="menu menu-start" popover role="menu" aria-label="Site">
<button class="menu-item" type="button" role="menuitemradio" aria-checked="true">All sites</button>
<button class="menu-item" type="button" role="menuitemradio" aria-checked="false">lagoon.example</button>
<button class="menu-item" type="button" role="menuitemradio" aria-checked="false">northbay.example</button>
</div>Saved views and applied filters
Links between saved views mark the current one with aria-current="true". An applied filter is a group: its name, its count in chip-count, and a chip-dismiss button named after what it removes.
<a class="chip" href="#chip-views" aria-current="true">All<span class="chip-count">28</span></a>
<a class="chip" href="#chip-views">Needs attention<span class="chip-count">3</span></a>
<a class="chip" href="#chip-views">Mine<span class="chip-count">11</span></a>
<span class="chip" role="group" aria-label="Filter: section Marine"><i class="bi bi-diagram-3" aria-hidden="true"></i>Section: Marine<span class="chip-count">9</span><button class="chip-dismiss" type="button" aria-label="Remove filter: section Marine"><i class="bi bi-x" aria-hidden="true"></i></button></span>States
Keyboard and accessibility
- A filter chip is a
<button>witharia-pressed; Space or Enter toggles it. Change the attribute when the filter changes - the look follows it. - A saved view is a link; the current one carries
aria-current="true". - An applied filter is
role="group"named after the filter, and its dismiss button names what it removes - "Remove filter: section Marine", not "Remove". - A count is part of the chip's name; say what it counts in the words around it when it is not obvious.
Tokens
From css/components/chip.css, which declares no custom property of its own.
It reads the theme's --redz-control-height-sm, --redz-border, --redz-bg, --redz-text, --redz-fs-12, --redz-bg-hover, --redz-primary-subtle, --redz-primary, --redz-text-muted.