Loading…

Management Bar

beta

A floating bulk-actions toolbar that springs up with a selection: a rolling count, icon actions whose labels spring open on hover or focus, and a rolling pager.

Data
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

The CLI installs number-flow as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add management-bar

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ManagementBar } from "@/components/ui/management-bar";

Examples

Every example the tests run, live and operable, side by side.

Default
Labels Always
Playground
Floating

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ManagementBar>

Prop	Type	Default
`selectedCount` (required) How many items are selected. The bar shows while it is above zero, unless `open` says otherwise.	`number`	—
`actions` Bulk actions, in order.	`ManagementBarAction[]`	`[]`
`clearLabel` The clear button's accessible name.	`string`	`"Clear selection"`
`defaultPage` Uncontrolled initial page.	`number`	`1`
`labels` `hover` springs each action's label open on hover or focus; `always` keeps every label open.	`"hover" \| "always"`	`"hover"`
`nextLabel`	`string`	`"Next page"`
`onClearSelection` Called by the clear button. Without it, no clear button is shown.	`() => void`	—
`onPageChange`	`(page: number) => void`	—
`open` Overrides whether the bar is shown. Defaults to `selectedCount > 0`.	`boolean`	—
`page` Controlled current page, 1-based.	`number`	—
`pageCount` Total pages. Without it (or with fewer than 2), there is no pager.	`number`	—
`placement`	`"floating" \| "inline"`	`"floating"`
`previousLabel` Pager button names.	`string`	`"Previous page"`
`selectedLabel` Word after the count, visibly and in the announcement: "3 selected".	`string`	`"selected"`
`surfaceClassName` Classes for the pill itself.	`string`	—

Plus every attribute of <div> except children, role.

Accessibility

A role="toolbar" named "Bulk actions" (aria-label) with a single Tab stop and a roving tabindex: ArrowLeft and ArrowRight move between controls in the reading direction, wrapping, and Home and End jump to the ends. The count and page are read from visually hidden text ("3 selected", "Page 2 of 5"); the rolling digits are aria-hidden. Each action is named by its label, which stays in the accessible name while visually collapsed. Pager buttons at a bound and disabled actions are aria-disabled rather than disabled, so focus is never stranded, and they ignore activation. If the bar closes with focus inside it, focus returns to where it came from. Nothing animates on first paint, and the springs run through motion inside MotionConfig reducedMotion="user", so under reduced motion the bar and labels appear without travel.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

selectedCount

How many items are selected. The bar shows while it is above zero, unless open says otherwise.

number

—

actions

Bulk actions, in order.

ManagementBarAction[]

[]

clearLabel

The clear button's accessible name.

string

"Clear selection"

defaultPage

Uncontrolled initial page.

number

1

labels

hover springs each action's label open on hover or focus; always keeps every label open.

"hover" | "always"

"hover"

nextLabel

string

"Next page"

onClearSelection

Called by the clear button. Without it, no clear button is shown.

() => void

—

onPageChange

(page: number) => void

—

open

Overrides whether the bar is shown. Defaults to selectedCount > 0.

boolean

—

page

Controlled current page, 1-based.

number

—

pageCount

Total pages. Without it (or with fewer than 2), there is no pager.

number

—

placement

"floating" | "inline"

"floating"

previousLabel

Pager button names.

string

"Previous page"

selectedLabel

Word after the count, visibly and in the announcement: "3 selected".

string

"selected"

surfaceClassName

Classes for the pill itself.

string

—