Expanding speed-dial FAB: a primary trigger that rotates open to stagger a stack of secondary actions on any side. Compound API.
'use client';
import {
FloatingActionButton,
FloatingActionButtonItem,
FloatingActionButtonList,
FloatingActionButtonTrigger,
} from '@/components/ui/floating-action-button';
import { ImageIcon, Link2, Plus, Type } from 'lucide-react';
export default function FloatingActionButtonDemo() {
return (
<div className="flex h-60 w-full max-w-xl items-end justify-center">
<FloatingActionButton>
<FloatingActionButtonList>
<FloatingActionButtonItem aria-label={'Add text'}>
<Type />
</FloatingActionButtonItem>
<FloatingActionButtonItem aria-label={'Add image'}>
<ImageIcon />
</FloatingActionButtonItem>
<FloatingActionButtonItem aria-label={'Add link'}>
<Link2 />
</FloatingActionButtonItem>
</FloatingActionButtonList>
<FloatingActionButtonTrigger aria-label={'Create'}>
<Plus />
</FloatingActionButtonTrigger>
</FloatingActionButton>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.