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

// 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>
  );
}

// Android: the published Compose package com.dizyx.nockerl.design.components (GitHub Packages Maven).
// Ships the SELECTABLE (filter) idiom: a pill that toggles selected/unselected.
import com.dizyx.nockerl.design.components.NockerlChip
import com.dizyx.nockerl.design.components.NockerlStatusDot
import com.dizyx.nockerl.design.components.NockerlStatusDotStatus

NockerlChip(
    text = "Sessions",
    onClick = { active = "sessions" },
    selected = active == "sessions",
)
NockerlChip("Agents", onClick = { active = "agents" }, selected = active == "agents")

// optional leading content (e.g. a status dot)
NockerlChip(
    text = "Online",
    onClick = ::toggleOnline,
    selected = true,
    leadingContent = { NockerlStatusDot(status = NockerlStatusDotStatus.SUCCESS) },
)

// SwiftUI: the published NockerlDesign SwiftPM package. `NockerlChip` ships the SELECTABLE
// (filter) idiom, matching Compose: a keycap pill that toggles the accent selection wash.
import NockerlDesign

NockerlChip("Sessions", selected: active == .sessions) { active = .sessions }
NockerlChip("Agents", selected: active == .agents) { active = .agents }

// A resting (unselected) chip: omit `selected` (defaults to false).
NockerlChip("local") { pickFilter(.local) }

Parameters

Prop	Type	Default	Description
`text` *	`string`		Visible label. Bound to the label type role.
`selected`	`boolean`	`false`	Whether this chip is the active selection (filter idiom).
`onClick`	`() => void`		Toggle/tap handler. Ignored while disabled.
`disabled`	`boolean`	`false`	Inert + clearly-seen (never invisible) state.
`leadingIcon`	`string`		Optional leading glyph (e.g. a status dot) before the label.
`swatch`	`string`		A 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`	`() => void`		When set, renders a trailing x; invoked when it is pressed (input idiom).
`token`	`boolean`	`false`	TOKEN 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.

Parameter	Type	Default	Description
`text` *	`String`		The chip label. Rendered with `NockerlControlTextStyle`.
`onClick` *	`() -> Unit`		Invoked on tap. No-op while `enabled = false`.
`modifier`	`Modifier`	`Modifier`	Outer modifier (size, weight, alignment).
`selected`	`Boolean`	`false`	Whether this chip is the active selection: `true` → solid `accentPrimary` fill + contrast label; `false` → `accentPrimarySoft` tint + cyan label.
`enabled`	`Boolean`	`true`	When `false`, the chip is dimmed (alpha) and non-interactive.
`contentPadding`	`PaddingValues`	`horizontal 14.dp, vertical 8.dp`	Inner padding, a compact keycap padding by default.
`leadingContent`	`(@Composable -> Unit)?`	`null`	Optional content (e.g. a status dot) before the label.

Selectable only, no removable variant

The published NockerlChip is selectable only on both native platforms. There is no trailing-✕ / onRemove parameter. A removable/tag chip is a web-only capability today; on Android or Swift it would be a custom composition. Tracked in the drift note.

The published NockerlChip is a View in the selectable (filter) idiom, matching Compose. selected toggles the accent wash (accentPrimarySoft fill + cyan label when on). It has no leading slot and no onRemove; honor .disabled(_:) for the dimmed state.

Parameter	Type	Default	Description
`text` *	`String`		The chip label (the leading unlabeled argument). Rendered at 12pt medium.
`selected`	`Bool`	`false`	Whether this chip is the active selection: `true` → `accentPrimarySoft` fill + cyan label; `false` → `cardSurface1` fill + on-card label.
`action` *	`() -> Void`		The trailing closure, invoked on tap.

Cross-platform parity (published packages)

The published Compose (com.dizyx.nockerl.design.components) and Swift (NockerlDesign) NockerlChip now share the selectable idiom and the pill token, and the earlier drift is resolved:

Same idiom. Both native platforms ship the selectable chip (selected, no ✕). Swift’s old removable-only Chip is retired. The removable/tag chip is now a web-only capability.
Pill radius is tokenized. Swift consumes NockerlRadius.pill; Compose uses NockerlPillShape. Same fully-rounded silhouette from a shared token, no bare Capsule().
Disabled is honored. Swift dims via .disabled(_:) (environment); Compose via the explicit enabled + 0.38 alpha.

Remaining, intentional differences:

Selected fill treatment. Compose’s selected chip is a solid accentPrimary + contrast label; Swift’s selected chip is the soft accentPrimarySoft wash + cyan label. Both are token-driven static fills, a deliberate per-platform read of the selection wash.
Leading content. Compose exposes a leadingContent slot (e.g. a status dot); web has leadingIcon; the published Swift NockerlChip has no leading slot yet.