Floating pill toolbar for text selection and canvas actions, with toggle buttons, separators and labels. Position it anywhere.
'use client';
import {
FloatingToolbar,
FloatingToolbarButton,
FloatingToolbarLabel,
FloatingToolbarSeparator,
} from '@/components/ui/floating-toolbar';
import { Bold, Italic, Link2, Strikethrough, Underline } from 'lucide-react';
export default function FloatingToolbarDemo() {
return (
<div className="flex w-full max-w-xl justify-center py-6">
<FloatingToolbar>
<FloatingToolbarLabel>Aa</FloatingToolbarLabel>
<FloatingToolbarSeparator />
<FloatingToolbarButton active aria-label={'Bold'}>
<Bold />
</FloatingToolbarButton>
<FloatingToolbarButton aria-label={'Italic'}>
<Italic />
</FloatingToolbarButton>
<FloatingToolbarButton aria-label={'Underline'}>
<Underline />
</FloatingToolbarButton>
<FloatingToolbarButton aria-label={'Strikethrough'}>
<Strikethrough />
</FloatingToolbarButton>
<FloatingToolbarSeparator />
<FloatingToolbarButton aria-label={'Add link'}>
<Link2 />
Link
</FloatingToolbarButton>
</FloatingToolbar>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.