Buttons

Fab

Floating action button with an optional speed-dial of actions.

Import

tsx

import { Fab } from "@cronus-ui/ui";

bash

npx cronus-ui add fab

Examples

Default

A single floating action button. Positioning is left to you — here it's pinned to the bottom-right of a relative demo box.

tsx

<div className="relative h-64 rounded-xl border border-border">
  <Fab
    icon={<Plus />}
    label="New item"
    className="absolute bottom-4 right-4"
  />
</div>

Speed dial

Pass `actions` to turn the FAB into a speed-dial: clicking it reveals a vertical stack of smaller round buttons, each with its own label chip. The main glyph rotates while open.

tsx

<div className="relative h-64 rounded-xl border border-border">
  <Fab
    icon={<Plus />}
    label="Create"
    className="absolute bottom-4 right-4"
    actions={[
      { icon: <Pencil />, label: "Write a note" },
      { icon: <Image />, label: "Upload an image" },
      { icon: <Upload />, label: "Import a file" },
    ]}
  />
</div>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component FabDefault layout:inline style:fab {
  label "Create"
}

page "/audit/fab/default" type:custom {
  use FabDefault
}

API Reference

Generated from the component's exported types.

FabProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`icon`*	`ReactNode`	—	The main glyph shown inside the floating button.
`label`*	`string`	—	Accessible name for the main button — wired to `aria-label`.
`actions`	`FabAction[]`	—	Optional speed-dial actions. When provided, clicking the FAB toggles an expanded vertical stack of smaller round buttons rendered above it.
`type`	`string`	—	Native type of the underlying element.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.