npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { ActionBarRoot, ActionBarContent, ActionBarCloseTrigger, ActionBarSelectionTrigger, ActionBarSeparator } from '@thrivecart/ui';Floating action bar for selected items
<ActionBarRoot open>
<ActionBarContent>
<ActionBarSelectionTrigger>3 selected</ActionBarSelectionTrigger>
<ActionBarSeparator />
<Button variant="ghost" size="sm" leftIcon={<MdEdit />}>Edit</Button>
<Button variant="ghost" size="sm" leftIcon={<MdArchive />}>Archive</Button>
<Button variant="ghost-destructive" size="sm" leftIcon={<MdDelete />}>Delete</Button>
<ActionBarCloseTrigger />
</ActionBarContent>
</ActionBarRoot>Always display the number of selected items for context.
Include a close trigger so users can deselect and dismiss the bar.
Limit to 3-5 actions. Move less common actions to an overflow menu.
Show delete/destructive actions but visually distinguish them with the destructive variant.