FloatingActions
FloatingActions places related commands above a trigger or fans them out in a flower layout. It opens on click or hover, supports controlled state, and uses theme-aware IconButtons for its trigger and actions. Labels can appear on hover and focus or stay visible.
Source
LLM docs
Package
Examples
2
Properties
47
Basics
The default stack places actions above the main button.
trigger="click" opens on press; trigger="hover" opens when a mouse enters the dial and closes shortly after it leaves. Tap and keyboard activation still work in hover mode. Use labelMode="persistent" to keep labels visible or labelMode="tooltip" to show them on hover and keyboard focus. mode="flower" fans actions up and toward the start side.The trigger and actions use
IconButton, so their icon contrast, focus ring, pressed state, and theme colors follow the same rules as Button. Set color and variant on the dial, or override them on an individual action. Actions can also be disabled. Use toggleIcon and closeIcon to customize the trigger. For controlled use, pass opened and onChange.Keep the dial to a few related commands (roughly three to six). Persistent labels are easier to discover on touch screens, where hover tooltips are unavailable.
Loading demo…
import { useState } from 'react';
import { Block, Column, FloatingActions, Text } from '@plocks/ui';
export function Demo() {
const [message, setMessage] = useState('Choose an action');
const actions = [
{ key: 'create', icon: 'plus', accessibilityLabel: 'Create item', color: 'success' as const, onPress: () => setMessage('Created') },
{ key: 'search', icon: 'search', accessibilityLabel: 'Search items', onPress: () => setMessage('Search selected') },
{ key: 'info', icon: 'info', accessibilityLabel: 'Show details', onPress: () => setMessage('Details selected') },
];
return (
<Column gap="lg" fullWidth>
<Block fullWidth h={280} position="relative" p="md">
<Text fw="semibold">Click or tap · persistent labels</Text>
<Text>{message}</Text>
<FloatingActions trigger="click" mode="stack" labelMode="persistent" actions={actions} />
</Block>
<Block fullWidth h={220} position="relative" p="md">
<Text fw="semibold">Hover · flower layout · focus for labels</Text>
<FloatingActions trigger="hover" mode="flower" labelMode="tooltip" actions={actions} />
</Block>
</Column>
);
}Variants
Compare the floating trigger appearance across four IconButton variants.
Loading demo…
import { Block, Column, FloatingActions, Text } from '@plocks/ui';
const actions = [{ key: 'add', icon: 'plus', label: 'Add item', onPress: () => {} }];
const variants = ['filled', 'default', 'outline', 'ghost'] as const;
export function Demo() {
return (
<Column gap="md" fullWidth>
{variants.map(variant => (
<Block key={variant} position="relative" h={110} fullWidth p="sm">
<Text fw="semibold">{variant}</Text>
<FloatingActions variant={variant} actions={actions} />
</Block>
))}
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources