All components
Action Bar
A floating bulk-action toolbar that appears above the page when items are selected.
Install
zsh — action-bar
1bunx stylexblocks add action-barUsage — Base UI
action-bar.tsx
1234567891011121314151617181920import { ActionBar } from "#components/ui/base-ui/action-bar.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
export function Example({ selection }: { selection: string[] }) { if (selection.length === 0) return null; return ( // the positioner fixes the bar over the viewport bottom, above the page — // render it only while a selection exists; parts compose via render <ActionBar.Positioner> <ActionBar.Content> <ActionBar.SelectionTrigger> {selection.length} selected </ActionBar.SelectionTrigger> <ActionBar.Separator /> <Button variant="ghost" size="xs">Download</Button> <Button variant="ghost" size="xs">Delete</Button> </ActionBar.Content> </ActionBar.Positioner> );}