Fluxo UIFluxo UIv0.1.1

Fab & Speed Dial

Floating action buttons for primary actions and speed dial menus that reveal multiple actions on hover or click.

FAB Basic

Basic FAB

Floating action buttons with different variants

import { Fab } from 'fluxo-ui';

<Fab icon={PlusIcon} variant="primary" onClick={() => console.log('clicked')} />
<Fab icon={PencilIcon} variant="success" />
<Fab icon={HeartIcon} variant="danger" />

FAB Sizes

FAB Sizes

Five size options from extra small to extra large

FAB Extended

Extended FAB

FAB with icon and label text

Speed Dial

Basic Speed Dial

Hover over the FAB to reveal action buttons

import { SpeedDial } from 'fluxo-ui';

const actions = [
  { icon: CopyIcon, label: 'Copy', onClick: () => console.log('copy') },
  { icon: PrintIcon, label: 'Print', onClick: () => console.log('print') },
  { icon: ShareIcon, label: 'Share', onClick: () => console.log('share') },
  { icon: PencilIcon, label: 'Edit', onClick: () => console.log('edit') },
];

<SpeedDial items={actions} />

Directions

Directions

Speed dial opens in up, down, left, or right direction

Up

Down

Left

Right

Speed Dial Variants

Trigger Variants

Different color themes for the speed dial trigger

primary
success
warning
danger
info
secondary
default

Speed Dial Sizes

Size Options

Five sizes from xs to xl

xs
sm
md
lg
xl

Click Trigger & Colored Actions

Click Trigger & Colored Actions

Click to toggle, and actions with individual color variants

Click trigger
Colored actions
With mask overlay

Import

import { Fab, SpeedDial } from 'fluxo-ui';
import type { SpeedDialItem } from 'fluxo-ui';

Fab Props

icon
IconComponent | ReactElement"-"

Icon displayed in the button

label
string

Label text (visible in extended mode)

variant
'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary'"'primary'"

Color variant

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Button size

position
'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'top-center'"'bottom-right'"

Fixed position on screen (when fixed=true)

fixed
boolean"false"

Use fixed positioning on screen

extended
boolean"false"

Show label text alongside icon

disabled
boolean"false"

Disable the button

onClick
(e: MouseEvent) => void

Click handler

className
string

Additional CSS class

ariaLabel
string

Accessible label

id
string

HTML id attribute

title
string

Tooltip text

SpeedDial Props

icon
IconComponent | ReactElement

Custom icon for the trigger (default: plus)

openIcon
IconComponent | ReactElement

Icon shown when open (default: close/X)

items
SpeedDialItem[]"-"

Array of action items with icon, label, variant, onClick

variant
'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary'"'primary'"

Trigger button color variant

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Overall size

position
'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'top-center'"'bottom-right'"

Fixed position (when fixed=true)

direction
'up' | 'down' | 'left' | 'right'"'up'"

Direction actions expand

trigger
'hover' | 'click'"'hover'"

How to open the speed dial

layout
'linear' | 'circle' | 'semi-circle'"'linear'"

Action layout pattern

fixed
boolean"false"

Use fixed positioning

disabled
boolean"false"

Disable the speed dial

showLabels
boolean"true"

Show text labels next to action icons

showTooltip
boolean"false"

Show native tooltip on actions

mask
boolean"false"

Show background overlay when open

open
boolean

Controlled open state

onOpenChange
(open: boolean) => void

Callback when open state changes

className
string

Additional CSS class

ariaLabel
string

Accessible label

id
string

HTML id attribute

Features

Multiple Variants

Seven color variants for both FAB and SpeedDial trigger buttons

Directional Expand

Speed dial actions expand up, down, left, or right from the trigger

Hover & Click Triggers

Open on hover for quick access or click for intentional interaction

Extended FAB

FAB with both icon and label for clearer action description

Mask Overlay

Optional backdrop overlay to focus attention on the speed dial actions

Fixed Positioning

Pin FAB or SpeedDial to any screen corner or center edge