Chip

<zeno-chip>Data displaySource

A compact label for a choice, filter or attribute. It can be clickable and removable.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Variants

Filled Outlined Subtle

<zeno-chip variant="filled">Filled</zeno-chip>
<zeno-chip variant="outlined">Outlined</zeno-chip>
<zeno-chip variant="subtle">Subtle</zeno-chip>

Colours

Each color works with each variant.

Published In review Rejected Published In review Rejected Published In review Rejected

<zeno-chip color="success">Published</zeno-chip>
<zeno-chip color="warning">In review</zeno-chip>
<zeno-chip color="danger">Rejected</zeno-chip>
<zeno-chip variant="outlined" color="success">Published</zeno-chip>
<zeno-chip variant="outlined" color="warning">In review</zeno-chip>
<zeno-chip variant="outlined" color="danger">Rejected</zeno-chip>
<zeno-chip variant="subtle" color="success">Published</zeno-chip>
<zeno-chip variant="subtle" color="warning">In review</zeno-chip>
<zeno-chip variant="subtle" color="danger">Rejected</zeno-chip>

Sizes

Extra small Small Medium Large

<zeno-chip size="xs">Extra small</zeno-chip>
<zeno-chip size="sm">Small</zeno-chip>
<zeno-chip size="md">Medium</zeno-chip>
<zeno-chip size="lg">Large</zeno-chip>

Removable

The remove button fires remove. The chip does not remove itself, so the page does it. Set removeLabel so that each button says what it removes. A disabled chip has no remove button.

report.pdf notes.txt budget.csv

<zeno-chip variant="subtle" removable>report.pdf</zeno-chip>
<zeno-chip variant="subtle" removable>notes.txt</zeno-chip>
<zeno-chip variant="subtle" removable disabled>budget.csv</zeno-chip>

document.querySelectorAll('zeno-chip').forEach(chip => {
  chip.removeLabel = 'Remove ' + chip.textContent.trim();
  chip.addEventListener('remove', () => chip.remove());
});

Clickable and selected

A clickable chip can take focus and fires a click on Enter or Space. The chip does not change selected itself, so the page does it.

All Documents Images Archived

<zeno-chip variant="outlined" clickable selected>All</zeno-chip>
<zeno-chip variant="outlined" clickable>Documents</zeno-chip>
<zeno-chip variant="outlined" clickable>Images</zeno-chip>
<zeno-chip variant="outlined" clickable disabled>Archived</zeno-chip>

document.querySelectorAll('zeno-chip').forEach(chip => {
  chip.addEventListener('click', () => {
    if (!chip.disabled) chip.selected = !chip.selected;
  });
});

Attributes and properties

Property	Attribute	Type	Default	Description
variant	variantreflects	'filled' | 'outlined' | 'subtle'	'filled'
color	colorreflects	'primary' | 'accent' | 'success' | 'warning' | 'danger'	'primary'
size	sizereflects	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
selected	selectedreflects	boolean	false
disabled	disabledreflects	boolean	false
removable	removablereflects	boolean	false
clickable	clickable	boolean	false
label	label	string	–
removeLabel	removelabel	string	'Remove'
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

Event	Detail	Description
remove	–	The remove button was pressed.

Slots

Slot	Description
Default	The label.
prefix	An icon or avatar before the label.

CSS parts

Part
base
label
prefix
remove

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to a clickable chip that is not disabled, and to the remove button of a removable chip.
EnterSpace	On a clickable chip, fires a click.
EnterSpace	On the remove button, fires remove.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• A plain chip is text in a <div> with no role. It is not in the tab order.
• A clickable chip has role="button", tabindex="0", and aria-pressed that follows selected.
• disabled sets aria-disabled="true", takes the chip out of the tab order and removes the remove button.
• The remove button is a native <button>. Its name is removeLabel, which is “Remove” unless you change it.
• A press on the remove button does not also click the chip.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

13 of the 19 properties, methods, events, slots and parts above have no description in the source

• the property variant
• the property color
• the property size
• the property selected
• the property disabled
• the property removable
• the property clickable
• the property label
• the property removeLabel
• the part base
• the part label
• the part prefix
• the part remove

Known gaps:

• The prefix slot does not work. The slot is rendered only when the chip finds content in it, and it cannot find content in a slot that is not rendered. An icon given to prefix never shows.
• The size type allows xl, but there are no styles for it. An xl chip looks like md.
• primary and accent look the same.
• There is no neutral colour. color defaults to primary, so a filled or subtle chip always has a colour.
• An outlined chip with color="primary" is grey, not the primary colour. The class that the style needs is left out for exactly this pair.
• selected is hard to see on filled and subtle chips. The colour rules are more specific than the selected rule, so only the border changes. It shows fully only on an outlined chip with the default colour.
• Every clickable chip is announced as a toggle button, pressed or not pressed, also when it only opens something.
• A chip that is both clickable and removable puts a button inside a button. Assistive technology may not show the remove button, because a button hides the roles of its children.
• The default remove label “Remove” is English and the same for every chip. It does not say what is removed.
• The attribute for removeLabel is removelabel, with no hyphen. Other elements use hyphens, as in max-items.
• With label, or with aria-label, a chip that is not clickable gets an aria-label on an element with no role, where it is not allowed.