Chip

A chip stands for one value the reader is holding: a filter that is applied, a person assigned, a tag on an article, a file attached. It is the member of this family that can be acted on, pressed when it represents a choice, removed when it represents a selection, where a Badge only reports a condition and an Avatar stands in for an entity.

Its content is the label, and everything else is optional: a node before it (avatar or startIcon), a status dot, a node after it (endIcon), and the remove control onClose adds. Remove that control and the chip is a label again; that one prop is what changes what the component is rather than how it looks.

Usage

import { Chip } from "@asheeui/web";

<Chip onClose={() => remove("Billing")} closeLabel="Remove Billing">
  Billing
</Chip>

Without onClose the same chip is a token with no dismissal, which is what a category or a topic wants. dot takes true for the current text colour or a CSS colour string; avatar replaces startIcon rather than sitting beside it; and a count is content, not a prop, <Chip>12 open</Chip>.

What a chip holds

Three nodes and a dot, resolved against the chip's own density: the box an icon sits in and the dot beside it scale with the text, and the slot sizes the inline SVG it holds, so the icon does not need className="size-full" to fit. The avatar slot has a scale of its own, larger than an icon's because a portrait is not a glyph, and a node that states its own diameter is scaled into that circle rather than cropped.

avatar takes precedence over startIcon: a chip shows who it is about or what it is about, not both. endIcon is dropped when onClose is given, because the trailing slot belongs to the remove control then. dot renders a circle of half an em in the current colour, or in the CSS colour the instance states.

Removing a chip

onClose adds a real remove control after the label and fires on press. The label it announces comes from closeLabel, which defaults to Remove chip, a row of chips is a row of identically named buttons unless each one says what it removes.

The chip does not remove itself: the page owns the list, and onClose is the event that tells it to. isDisabled refuses both the press and the close, so a chip marked unavailable cannot be taken away by accident. closeIcon replaces the glyph when the product has its own.

Props

size and radius are registered by the component as md and full; variant and color are deliberately not, so they resolve from the application's defaultVariant and defaultColor and then from bordered and primary. Because radius is registered, full beats the application's defaultRadius: chips are pills in a boxy product too, unless components.chip.radius or the instance says otherwise. A treatment the chip cannot draw is landed on one it can, so an application whose defaultVariant is underlined gets bordered chips.

isDisabled, onClose, closeLabel, closeIcon, dot, avatar, startIcon, endIcon and children are instance-only: they describe one token rather than the design. closeLabel is not a cascade value either, it is a component default, Remove chip, and a list of chips should almost always override it.

Accessibility

• The root is a div. A chip with onClick becomes role="button" and a tab stop on its own, so a pressable chip needs nothing from the caller; a chip that is only a label carries neither a role nor a tab stop, because a decorative chip has nothing to operate. The focus ring is drawn with focus-visible, so it appears for a keyboard and not for a mouse.
• Enter and Space activate a pressable chip, and only when the key is pressed on the chip itself: the remove control is a real button, so its own keys close the chip and never reach the press handler.
• isDisabled sets aria-disabled, emitted only while the state applies, drops a pressable chip from the tab order (tabindex="-1"), dims it and removes pointer events; the remove control is disabled as well, so the chip cannot be changed while it is unavailable.
• The remove control is a real <button type="button"> named by closeLabel, so it is announced as a button that says what it removes rather than as a second Remove chip.

Related