Components / data-display

Bulk Action Bar

Appears when rows are selected in a Table or List: the number selected, the actions that apply to all of them, and a way to clear the selection.

import { BulkActionBar } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { BulkActionBar, Button } from '@basiiik/ui';

<BulkActionBar count={3}><Button variant="danger" size="sm">Remove</Button></BulkActionBar>

Example values were filled in for the required prop count: replace them with your own.
Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
Hidden when count is 0. The actions are Buttons with their own states.
Compose with: button.
Storybook: Data display/Bulk Action Bar.

Props

Prop	Type	Notes
`variant`	`"inline" \| "floating"`	Default "inline"
`count` required	`number`
`children` required	`ReactNode`
`onClear`	`() => void`
`label`	`string`

Other props

Prop	Type	What it does
`formatCount`	`(count: number) => string`	The count text. Default "{count} selected".
`clearLabel`	`string`	Text of the clear button. Default "Clear selection".

States. Hidden when count is 0. The actions are Buttons with their own states.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

A Table or List with row checkboxes, once at least one row is selected

Do not use it when

Actions for one item (put them in the row or a DropdownMenu)
Page-level actions (use the PageHeader actions)
A filter bar

Rules for agents

Render it next to the selectable Table or List and pass count from the selection state; it hides itself at 0
Use small Buttons (size="sm"): outline on the inline bar (its background is brand-tinted), at most one danger
Pass onClear so people can clear the selection
In onClear (and after an action that empties the selection) move focus back to the list, e.g. the select-all checkbox or the first row: the bar hides, so a focused button inside it would leave focus on nothing
Confirm destructive actions with a Modal before applying them
Use variant="floating" for long lists where the top of the table scrolls away

Avoid

A hand-built div with a count and Buttons
Secondary Buttons on the inline bar (they vanish into its tinted background)
Showing the bar with 0 selected
Moving focus into the bar when it appears
More than four actions; put the rest in a DropdownMenu

Writing the content

Count: "3 selected"; translate it with formatCount
Actions: verbs: "Change role", "Remove", "Export"

Keyboard

Tab moves through the actions, then Clear selection
The bar itself is not focusable; focus stays where the person selected rows
After Clear selection the bar hides; the page must move focus back to the list (see rules)

Accessibility

The bar is a group named by label (default "Bulk actions")
The count is announced politely through a status region that stays mounted, so "3 selected" is read when it changes
Hidden (not just empty) when nothing is selected

Colour tokens it reads

color.bg.brand.subtlecolor.bg.surfacecolor.border.defaultcolor.text.primary

data-display 2 Figma variants Try it in the live demo