ActionBar

Floating toolbar for bulk actions on a selection. Announces the count politely.

Import

import { ActionBar } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/action-bar.

Usage

export const Default: Story = { render: () => <Demo width="32rem" /> };

Source of the Storybook story.

Props

Prop	Type	Default	Description
selectedCount *	number		Number of selected items. The bar renders nothing while it is 0.
noun	[singular: string, plural: string]	["seleccionado", "seleccionados"]	Singular and plural noun for the live count, e.g. [“cita”, “citas”].
onClear	(() => void)		Clears the selection (close button and Escape).
children	ReactNode		Bulk actions, usually Buttons.
position	"absolute" | "fixed" | "static"	"absolute"	fixed floats over the viewport; absolute floats inside the nearest positioned ancestor (a card, a table wrapper); static renders inline.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Narrow
• Brutal Preset
• Glass Preset

Source

packages/ui/src/containers/action-bar/action-bar.tsx