FAB

In review

Live · web

Round: pinned to the corner, floating above content

Session feed

Extended: icon + label for the headline action

Tasks

New task

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.

Why the speed-dial isn't a Popover or Menu

The speed-dial is a distinct idiom, not a surface variant. It deliberately does not fold onto the Popover / Menu surface. A Popover or Menu is one overlay surface holding a list of text rows; a speed-dial is a stack of individual floating mini-actions, each a real NockerlIconButton with its own lifted label chip, radiating from the FAB. Collapsing it onto a single menu surface would erase the pattern.

It still obeys the overlay surface grammar: every label chip is a lifted card, built from a neutral drop shadow + a top catch-light + the card-surface fill + a hairline, on the control radius. That is the chip-scale of the very same Popover recipe (no glow, no colored shadow), and the open / close behavior is the shared NockerlOverlay (scrim, focus-trap, Esc). Same laws, the right idiom.

Code

TypeScriptKotlinSwift

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

// Android: Jetpack Compose (canonical). The shipped Nockerl FAB is a corner-pinned
// CircleShape Surface lifted at NockerlElevation.Level3 (the floating-chrome tier),
// e.g. the scroll-to-bottom FAB in chat/ui/ChatScreen.kt. Standard M3 FAB builders
// also accept the Nockerl shadow/colors via Modifier + containerColor.
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.LargeFloatingActionButton
import androidx.compose.material3.SmallFloatingActionButton
import androidx.compose.foundation.shape.CircleShape
import com.nockerl.app.core.theme.NockerlElevation
import com.nockerl.app.core.theme.nockerlShadow

// Round (icon-only), a solid accent circle in the prominent-action slot.
FloatingActionButton(
    onClick = viewModel::createSession,
    shape = CircleShape,
    containerColor = colors.accentPrimary,
    contentColor = colors.onAccent,
    modifier = Modifier.nockerlShadow(NockerlElevation.Level3, CircleShape),
) { Icon(Icons.Default.Edit, contentDescription = "New session") }

// Extended, with icon + label for the headline action (control radius, not a pill).
ExtendedFloatingActionButton(
    onClick = viewModel::createTask,
    icon = { Icon(Icons.Default.Add, contentDescription = null) },
    text = { Text("New task") },
)

// Sizes: small (40) and large (72) flank the standard (56).
SmallFloatingActionButton(onClick = ::fork) { Icon(Icons.Default.CallSplit, null) }
LargeFloatingActionButton(onClick = ::fork) { Icon(Icons.Default.CallSplit, null) }

// macOS: SwiftUI. Nockerl Voice ships no literal FAB; its closest equivalent is
// the circular record / primary affordance. This is the INTENDED Nockerl style,
// a corner-pinned circular primary applied as a ButtonStyle, overlaid on content.
// (See the drift note below.)
ZStack(alignment: .bottomTrailing) {
    sessionFeed

    Button(action: createSession) {
        Image(systemName: "square.and.pencil")
    }
    .buttonStyle(.nockerlFab)          // solid accent circle, Level3 shadow + catch-light
    .padding(16)

    // Extended, with icon + label for the headline action.
    Button(action: createTask) {
        Label("New task", systemImage: "plus")
    }
    .buttonStyle(.nockerlFabExtended)  // control radius, not a pill
    .padding(16)
}

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
icon *	ReactNode	n/a	The glyph. Centered in the circle; sized per size.
label *	string	n/a	Accessible name. Required for the round (icon-only) FAB, which has no visible text. The extended FAB also names itself from extendedLabel.
extendedLabel	string	n/a	Visible text → renders the extended (icon + label) FAB at the control radius. Omit for the round FAB.
onClick	() => void	n/a	Activate handler. Ignored while disabled.
size	'small' | 'standard' | 'large'	'standard'	Footprint: small 40 · standard 56 · large 72. (Round FAB only.)
disabled	boolean	false	Lowered / 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.

Parameter	Type	Default	Description
onClick *	() -> Unit	n/a	Invoked on tap.
modifier	Modifier	Modifier	Pass Modifier.nockerlShadow(NockerlElevation.Level3, CircleShape) for the floating lift, and align it to a corner in the parent.
shape	Shape	FAB default	Use CircleShape for the round FAB; the extended builder uses the control radius.
containerColor	Color	theme	Fill. The Nockerl prominent slot uses colors.accentPrimary.
contentColor	Color	theme	Icon / label color. Pair the accent fill with colors.onAccent.
content *	@Composable -> Unit	n/a	The icon (round) or, on ExtendedFloatingActionButton, supplied via the icon + text slots.

Builders: FloatingActionButton (standard), SmallFloatingActionButton (40), LargeFloatingActionButton (72), ExtendedFloatingActionButton (icon + label).

SwiftUI exposes the FAB as a ButtonStyle applied to a standard Button, overlaid on content with ZStack(alignment: .bottomTrailing). State (isEnabled, isPressed) comes from the environment + the style Configuration. There are no state parameters.

Style	Type	Default	Description
.nockerlFab	ButtonStyle	n/a	Solid accent circle, on-accent glyph, Level3 neutral shadow + top catch-light. Pressed → ~0.92 brightness + slight scale; disabled → card surface + muted glyph, lift removed. Intended, not yet shipped in Voice.
.nockerlFabExtended	ButtonStyle	n/a	Icon + label at the control radius (not a pill); otherwise identical fill / lift / states to .nockerlFab. Intended, not yet shipped.

Cross-platform drift (tracked for reconciliation)

• Fill (resolved): the FAB fill is a solid accent cyan circle. The tonal and outline treatments are retired. The shipped Android FAB (today a tonal surfaceContainerHighest circle with a cyan outline + icon) conforms to the solid accent.
• No FAB wrapper: Android has no NockerlFab, so call sites compose Surface(CircleShape) + nockerlShadow(Level3) by hand, or the M3 builders. A wrapper should be added so the lift + accent are not re-derived per screen.
• Swift: Nockerl Voice ships no FAB. Its circular record affordance (RecordingHUD.swift) is the nearest relative. .nockerlFab / .nockerlFabExtended are the intended styles, not yet implemented.
• Sizes: web exposes size (small/standard/large); Compose uses distinct builders; Swift is fixed.