Photonix

FAB

Floating Action Button for the primary action on a screen.

Preview

Usage
"use client";

import { Fab, Flex } from '@photonix/ultimate';
import { AddOutline, SearchOutline } from '@photonix/icons';

export default function FabBasicExample() {
    return (
        <Flex gap="md" align="center">
            <Fab variant="primary" icon={<AddOutline />} aria-label="Create item" />
            <Fab variant="secondary" size="large" icon={<SearchOutline />} label="Search" />
            <Fab variant="primary" icon={<AddOutline />} label="Create" isCollapsed />
        </Flex>
    );
}

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
"use client";

import { Fab, Flex, Text } from '@photonix/ultimate';
import { AddOutline, SettingsOutline } from '@photonix/icons';

export default function FabVariantsExample() {
    return (
        <Flex gap="xl" align="center">
            <Flex direction="column" align="center" gap="sm">
                <Text variant="label-sm" color="secondary">Primary</Text>
                <Fab variant="primary" icon={<AddOutline />} aria-label="Add" />
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Text variant="label-sm" color="secondary">Secondary</Text>
                <Fab variant="secondary" icon={<SettingsOutline />} aria-label="Settings" />
            </Flex>
        </Flex>
    );
}

Sizes

Standard sizes for different hierarchies.

Small

Medium

Large

Sizes
"use client";

import { Fab, Flex, Text } from '@photonix/ultimate';
import { AddOutline } from '@photonix/icons';

export default function FabSizesExample() {
    return (
        <Flex gap="xl" align="end">
            <Flex direction="column" align="center" gap="sm">
                <Text variant="label-sm" color="secondary">Small</Text>
                <Fab size="small" icon={<AddOutline />} aria-label="Add" />
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Text variant="label-sm" color="secondary">Medium</Text>
                <Fab size="medium" icon={<AddOutline />} aria-label="Add" />
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Text variant="label-sm" color="secondary">Large</Text>
                <Fab size="large" icon={<AddOutline />} aria-label="Add" />
            </Flex>
        </Flex>
    );
}

Extended FAB

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

Extended

Collapsed

Extended FAB
"use client";

import { Fab, Flex, Text } from '@photonix/ultimate';
import { AddOutline } from '@photonix/icons';

export default function FabExtendedExample() {
    return (
        <Flex gap="xl" align="center">
            <Flex direction="column" align="center" gap="sm">
                <Text variant="label-sm" color="secondary">Extended</Text>
                <Fab icon={<AddOutline />} label="Compose" />
            </Flex>
            <Flex direction="column" align="center" gap="sm">
                <Text variant="label-sm" color="secondary">Collapsed</Text>
                <Fab icon={<AddOutline />} label="Compose" isCollapsed />
            </Flex>
        </Flex>
    );
}

States

Loading and disabled states.

States
"use client";

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

export default function FabStatesExample() {
    return (
        <Flex gap="xl" align="center">
            <Fab isLoading icon={<AddOutline />} aria-label="Loading" />
            <Fab disabled icon={<AddOutline />} aria-label="Disabled" />
        </Flex>
    );
}

On this page

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