Chip
Interactive filter or choice chip. Selected shows a check and brand tint.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="row" role="group" aria-label="Filters">
<button type="button" class="px-chip" aria-pressed="true" data-px-toggle><svg class="px-icon px-chip__check" aria-hidden="true">…</svg>All projects</button>
<button type="button" class="px-chip" aria-pressed="false" data-px-toggle><svg class="px-icon px-chip__check" aria-hidden="true">…</svg>Design</button>
<button type="button" class="px-chip" aria-pressed="false" data-px-toggle><svg class="px-icon px-chip__check" aria-hidden="true">…</svg>Engineering</button>
<button type="button" class="px-chip" aria-pressed="false"><svg class="px-icon" aria-hidden="true">…</svg>More filters<svg class="px-icon" aria-hidden="true">…</svg></button>
</div>Usage
- Use for quick filters above lists and tables.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Small and disabled
<div class="row"><button type="button" class="px-chip px-chip--sm" aria-pressed="false" data-px-toggle><svg class="px-icon px-chip__check" aria-hidden="true">…</svg>Small</button><button type="button" class="px-chip" disabled>Disabled</button></div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-chip | class | Button with aria-pressed. |
px-chip--sm | class | Small. |
px-chip__check | class | Check icon shown when pressed. |
data-px-toggle | attribute | Toggles aria-pressed on click. |
Figma properties
Chip20 variants · page “Tags”Open
Interactive filter or choice chip. Selected shows a check and brand tint. Use for quick filters above lists and tables (aria-pressed), or with a trailing chevron to open a filter menu.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Filter” |
| Leading icon | Boolean | — |
| Leading icon swap | Instance swap | — |
| Trailing chevron | Boolean | — |
| Size | Variant | Small Medium |
| Selected | Variant | False True |
| State | Variant | Active Hover Pressed Focused Disabled |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-chip-content | color-content-neutral-primary | #101828 |
--px-chip-selected-content | color-content-brand-default | #2563eb |
--px-chip-height-sm | spacing-24 | 24px |
--px-chip-height-md | spacing-28 | 28px |
--px-chip-radius | radius-8 | 8px |
--px-chip-padding-x | spacing-12 | 12px |
--px-chip-gap | spacing-8 | 8px |
Accessibility
- aria-pressed tells screen readers the filter is on.