Buttons

Fab

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

Import

tsx

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

bash

npx cooud-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>

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.