Skip to content
NockerlDesignv2.0.0

Icon button

In review
Live · web

Plain: toolbar / inline actions (tab, click them)

Disabled: inert, still visible

Filled circle: the send / stop slot (the only true circle)

Click handler fired 0 times. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform; there is
// no shipped icon button yet, so this is the intended @dizyx/nockerl-react API, mirroring
// the canonical Compose shape.)
import { NockerlIconButton } from '@dizyx/nockerl-react';
import { MoreVertical, Plus, Send, Square } from 'lucide-react';


export function SessionToolbar() {
  return (
    <div className="toolbar">
      <NockerlIconButton icon={<MoreVertical />} label="More options" onClick={openMenu} />
      <NockerlIconButton icon={<Plus />} label="Add session" onClick={createSession} />


      {/* The send / stop slot, the only filled-circle idiom */}
      <NockerlIconButton icon={<Send />} label="Send message" variant="filled-circle" onClick={send} />
      <NockerlIconButton icon={<Square />} label="Stop generating" variant="filled-circle" accent="error" onClick={stop} />
    </div>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
icon *ReactNodeThe glyph to render (inline SVG node - e.g. <NockerlIcon .../>).
label *stringAccessible name (REQUIRED - the only thing that names an icon-only control).
variantNockerlIconButtonStyle'plain'The icon-button idiom. Defaults to plain.
accentstring'var(--color-accent-primary)'Circle fill for filled-circle (defaults to the cyan accent token). Pass a var(--token).
sizenumber40Touch-target dimension in px. Defaults to 40 (Compose default).
pressedbooleanTOGGLE mode: when set, the icon button HOLDS state: renders aria-pressed and, when true, the pressed VISUAL is the selection wash (soft cyan + cyan glyph, design-laws section 6). The primary home for icon toggles (toolbar toggles, wrap, etc.). Omit for a plain command icon button.

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