Bulk action bar | Glaze design system

Lead

When to use it

Use: A Table or DataGrid with a selection column, and actions that apply to every selected row.
Use: A long list where the selection outlives the scroll: position="floating".
Not for: An action on one row; put it in the row's actions. Use Table.
Not for: Actions on the page as a whole. Use Button group.

6 rules

Must: Keep every BulkAction flat (the default secondary) except at most one, which leads as variant="destructive" for what cannot be undone or "primary". Because the bar is a group of actions, and two glass pills side by side split the eye; green confirm never fits a bulk action.
Must: Pass count from the selection and noun as the singular and plural, and keep the bar mounted at 0. Because the bar hides itself at 0 but keeps its status line, so "Selection cleared" is heard; unmounting it drops that.
Must: Pass onClear. Because it draws the clear button and binds Escape, the two ways out of a selection a person can see and reach.
Never: Put a plain Button in the bar; use BulkAction. Because BulkAction joins the toolbar's arrow-key order and takes the bar's 26px size, and a plain Button adds a tab stop at 32px.
Should: Hold the bar to two to four actions, with a DropdownMenu at the end for the rest. Because the actions scroll sideways once they outgrow the pill, and a hidden action is a missing one.
Should: Set position="inline" above the rows for a short table and "floating" for a list longer than the screen. Because a floating bar stays in reach while the person scrolls to pick more rows; above a short table it would cover the rows it acts on.

4 checks

: The bar is a toolbar named "Actions for 3 runs selected": one tab stop, arrow keys between its controls.
: A status line announces the count when it changes, and "Selection cleared" at 0.
: The clear button is named "Clear selection"; Escape anywhere in the bar does the same.
: Floating, it sits in the reading order where it is written; put it after the table it acts on.

3 keys

5 edge cases

Nothing selected: The bar hides; its status line stays mounted and says "Selection cleared".
Too many actions for the width: The actions scroll sideways inside the pill; the count and clear keep their place.
Floating on a phone: The bar spans the viewport less 16px each side and centres.
A pending action: Pass pending to that BulkAction; it keeps its size and blocks a second press.
Dark theme: Paper and the ring flip with their tokens; the coral lead turns to light glass.

5 props

count: number
noun: [string, string] default ['item', 'items']
onClear: () => void
position: 'inline' | 'floating' default 'inline'
BulkAction variant: 'secondary' | 'primary' | 'destructive' default 'secondary'

9 tokens