Chip | Lime design system

Examples

Filter spending

Applied filters

Quick amounts

When to use it

8 rules

Must: Wrap chips that share a question in role="group" with an aria-label. Because a screen reader otherwise reads a row of toggles with no question they answer.
Must: Set removeLabel to name each close button, such as "Remove Vertical". Because removeLabel defaults to "Remove", so every close button reads the same.
Must: Move focus to the next chip or the group after a removal. Because the close button unmounts with its chip and focus falls to the body.
Should: Say nothing is filtered when the last chip is removed instead of leaving a blank row.
Should: Use one to three words in sentence case; the label never wraps.
Never: Use a disabled Chip to show a status; use Badge for anything static. Because a disabled Chip is still announced as a toggle button, dimmed to fg-disabled.
Must: Put chips in a flex-wrap row; they never shrink or wrap their label. Because chips are whitespace-nowrap, so an unwrapped row overflows a 390px screen.
Never: Put your own button inside a Chip; onRemove already renders a sibling close button. Because a button inside the Chip's button is invalid HTML and its press also toggles the chip.

4 checks

: Role button with aria-pressed true or false; the close button is a separate button.
: Space and Enter toggle; Tab visits each chip and close button in order.
: Chosen shows the wash, an olive edge and a check, so it reads without color.
: Focus shows a 2px olive outline offset 2px.

6 edge cases

Long label: Never wraps; the chip is as wide as its text and overflows a narrow row.
Row in 160px: A flex-wrap row wraps; a no-wrap row overflows.
Right to left: The toggle and close button mirror with logical edges.
Zoom 200%: The text grows and the 32px height stays.
Touch: The chip is 32px tall, under 44px; leave 8px between chips.
Forced colors: A chosen chip paints with Highlight; the check follows the text color.

5 props

15 tokens