ActionBar

An action bar holds the bulk actions for whatever a user has selected in a list, table, or card view. It appears as soon as something is selected, and goes away when the selection is cleared.

Anatomy

Structure

<ActionBar>
    <Button /> /* One or more action buttons */
</ActionBar>

Composed Components

An ActionBar uses the following component:

Usage

Actions

Any Button variant can be used as an action. Follow ButtonGroup's conventions: one primary action, with secondary or danger actions next to it.

Clearing the selection

The onClearSelection handler is called when the close button is pressed, or when the Escape key is pressed while the ActionBar has focus.

Selecting all items

When every item is selected, pass "all" to selectedItemCount instead of a number.

"all" covers the whole collection, including items that haven't loaded yet. In a paginated or virtualized list that's more than what's on screen, so use a number when only the loaded items are selected.

Naming the selected items

The default text says "item", which works for most collections. When yours holds something more specific, pass selectionText to replace the whole sentence. It takes a node, or a function that receives selectedItemCount.

It's the whole sentence and not just the noun because the surrounding words have to agree with it. French needs "3 personnes sélectionnées" but "3 fichiers sélectionnés": swapping only the noun would leave the participle wrong. Format the string in your own translation files, where the plural rules and agreement for each locale already live.

Best Practices

ActionBars should:

• Only appear while at least one item is selected — pass 0 to selectedItemCount to hide it.
• Keep actions short and specific to the current selection (e.g. "Archive", "Delete").
• Use variant="danger" sparingly, and only for destructive, irreversible actions.

Props