Photonix

FAB

Floating Action Button for the primary action on a screen.

Preview

Usage
import { Fab } from '@photonix/ultimate';
import { AddOutline } from '@photonix/icons';

<Fab icon={<AddOutline />} aria-label="Add" />
<Fab icon={<AddOutline />} label="Create New" />

Component API

Fab

Prop
Type
Default
Description
variant
"primary" | "secondary"
'primary'
Visual variant of the FAB - primary: Dark solid background - secondary: Light background, no border
size
"small" | "large" | "medium"
'medium'
Size of the FAB (same as Button) - large: 48px height - medium: 44px height (default) - small: 36px height
icon
React.ReactNode
-
Icon to display (required)
label
string
-
Optional text label (extended FAB) If not provided, renders as icon-only FAB
isCollapsed
boolean
false
Whether FAB is collapsed (icon-only mode) Use this with scroll detection to collapse/expand
isLoading
boolean
false
Shows loading spinner and disables interaction
aria-label
string
-
Accessible label for the FAB (required if no label text)
asChild
boolean
false
When true, renders children directly instead of button element

Variants

Styles

Primary is for the main action, Secondary for auxiliary actions.

Primary

Secondary

Styles
<Fab variant="primary" icon={<AddOutline />} aria-label="Add" />
<Fab variant="secondary" icon={<SettingsOutline />} aria-label="Settings" />

Sizes

Standard sizes for different hierarchies.

Small

Medium

Large

Sizes
<Fab size="small" icon={<AddOutline />} />
<Fab size="medium" icon={<AddOutline />} />
<Fab size="large" icon={<AddOutline />} />

Extended FAB

Extended FABs contain text and an icon. They can be collapsed to icon-only state.

Extended

Collapsed

Extended FAB
<Fab icon={<AddOutline />} label="Compose" />
<Fab icon={<AddOutline />} label="Compose" isCollapsed />

States

Loading and disabled states.

States
<Fab isLoading icon={<AddOutline />} />
<Fab disabled icon={<AddOutline />} />

On this page

Preview
Component API
Variants
Styles
Sizes
Extended
States
Photonix UI - React Components, Templates & Figma Design System