<!-- Generated by tools/docs.php from docs/src/chip.html - edit the source, not this file. -->

# 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.

```html
<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.

```html
<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>` with `aria-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`](https://github.com/redz-tech/REDZ.UI/blob/main/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`.
