build69
Sign inGet API key
build69  /  Components  /  Buttons & Actions  /  Fab

Fab

v1.0.1Updated 20 Jul 2026

Floating Action Button: circular + extended variants, three sizes, tonal colours, and fixed-corner positioning helpers. Supports loading state and icon-only / icon+label content.

View source← Back to catalog

Preview

Live · 10 stories
Circular DefaultOpen ↗
▸Why this is recommendedfabfloatingactionmui+3

Fab — circular default.

Recommended for+14
  • ✓Primary CTA on mobile-first surfaces
  • ✓Quick-add buttons (compose docs, new task)
  • ✓Camera / capture triggers
Tags+6
fabfloatingactionmuictacirculardefault
Features+4
  • Circular + extended (with label) variants
  • Sizes sm / md / lg
  • Tones (primary / secondary / success / warning / destructive)
  • Fixed-corner positioning (bottom-right / bottom-left / top-right / top-left)
  • Loading state with spinner
Not recommended for−2
  • ✕Multiple primary actions (use a Topbar action group)
  • ✕Desktop-only surfaces with plenty of header space (use Button)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Fab" })

Usage

import { Fab } from '@/components/actions/fab';
import { Plus } from 'lucide-react';

<Fab position="bottom-right" tone="primary"><Plus /></Fab>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
variant

Circular or extended

'circular' | 'extended'—
size

Size preset

'sm' | 'md' | 'lg'—
tone

Colour tone

string—
position

Fixed-corner placement

'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'—
loading

Loading state

boolean—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files