Skip to content
NockerlDesignv2.0.0

FAB

In review
Live · web

Round: pinned to the corner, floating above content

Session feed

Extended: icon + label for the headline action

Tasks

Sizes: small (40) · standard (56) · large (72)

Sizes

Speed-dial: expands to mini actions (Enter/Space · Esc to close)

Create

Lowered / disabled: sheds its lift, stays visible

Read-only view

Last action: none yet · fired 0 times. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)
// A FAB FLOATS above content, pinned to a corner, so give it a positioned parent.


export function SessionFeed() {
  return (
    <div style={{ position: 'relative' }}>
      {/* …the scrollable feed… */}


      {/* Round (icon-only) FAB: the single most important action */}
      <Fab icon={<EditIcon />} label="New session" onClick={createSession} />


      {/* Extended FAB with icon + label for the headline action */}
      <Fab icon={<PlusIcon />} label="New task" extendedLabel="New task" onClick={createTask} />


      {/* Speed-dial that expands into mini secondary actions */}
      <FabSpeedDial
        label="Create"
        actions={[
          { id: 'chat', label: 'New chat', icon: <ChatIcon />, onSelect: newChat },
          { id: 'voice', label: 'Voice note', icon: <MicIcon />, onSelect: newVoice },
          { id: 'upload', label: 'Upload file', icon: <UploadIcon />, onSelect: upload },
        ]}
      />
    </div>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
icon *ReactNodeThe glyph. Centered in the circle; sized per size.
label *stringAccessible name. Required for the round (icon-only) FAB, which has no visible text. The extended FAB also names itself from extendedLabel.
extendedLabelstringVisible text → renders the extended (icon + label) FAB at the control radius. Omit for the round FAB.
onClick() => voidActivate handler. Ignored while disabled.
size'small' | 'standard' | 'large''standard'Footprint: small 40 · standard 56 · large 72. (Round FAB only.)
disabledbooleanfalseLowered / inert: sheds its lift shadow and stays clearly visible (never faded to invisible).

FabSpeedDial adds actions (an array of { id, label, icon, onSelect }) and reuses label as the trigger name; it manages aria-expanded, Esc-to-close, and focus.