Skip to content
NockerlDesignv2.0.0

Chip

In review
Live · web

Filter chips: toggle (cyan = selected)

Filter chip with a leading status dot

Removable input chips: press the ✕ (or focus it and hit Enter)

Disabled: inert, still visible

Removed 0 chips. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform; this is the
// canonical API the published @dizyx/nockerl-react package is intended to expose. It
// unifies both shipped idioms: `selected` for filtering, `onRemove` for removable tokens.)
import { NockerlChip } from '@dizyx/nockerl-react';


export function FilterStrip() {
  const [active, setActive] = useState('sessions');
  return (
    <div className="chip-row">
      {/* filter idiom: selected gets the cyan fill */}
      <NockerlChip text="Sessions" selected={active === 'sessions'} onClick={() => setActive('sessions')} />
      <NockerlChip text="Agents" selected={active === 'agents'} onClick={() => setActive('agents')} />


      {/* input idiom, a removable token */}
      <NockerlChip text="typescript" selected onRemove={() => removeTag('typescript')} />
    </div>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
text *stringVisible label. Bound to the label type role.
selectedbooleanfalseWhether this chip is the active selection (filter idiom).
onClick() => voidToggle/tap handler. Ignored while disabled.
disabledbooleanfalseInert + clearly-seen (never invisible) state.
leadingIconstringOptional leading glyph (e.g. a status dot) before the label.
swatchstringA per-item COLOR swatch dot before the label (e.g. a chart series color). Unlike leadingIcon='dot' (which inherits the chip's currentColor), this paints an arbitrary fixed color, so a row of chips can each carry a distinct key color.
onRemove() => voidWhen set, renders a trailing x; invoked when it is pressed (input idiom).
tokenbooleanfalseTOKEN mode: render the chip as a NON-interactive <span> container (NOT a <button>), so a removable token can sit INSIDE another interactive element (e.g. a MultiSelect trigger <button>) without nesting a real <button> (the React #418 nested-button hydration bug fixed in Wave 1). The removable x stays its own span[role=button] control (a span, never a nested <button>). A token is a static tag + a remove, not a toggle, so selected / onClick / aria-pressed do not apply in this mode.

Also accepts the native <button> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.