BulkActionBar

Server component, no client JS

ImportCopy Anchor Link

import { BulkActionBar } from '@nizivo/react/bulk-action-bar';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/bulk-action-bar.css';

Static or interactiveCopy Anchor Link

Server. It ships no client code of its own: TableSelection, the one island of table selection, writes its count. Before hydration the count is hidden and the actions already work, because they submit the form the rows' checkboxes belong to. How to choose.

UseCopy Anchor Link

BulkActionBar is the bar over the table: how many rows are selected, then the actions you put in it, such as the form the rows' boxes belong to. Place it inside TableSelection. The count ("2 selected") is written by TableSelection's island as the selection changes, and a screen reader hears it (aria-live="polite"). Pass defaultCount, the number of rows checked when the page renders, and the server writes the count too, so it shows before hydration and hydration leaves it as it is; without it, the count shows once the island runs. The actions work before hydration either way. The bar stays in place when nothing is selected, so checking the first row does not move the table. labels.selected (with {count}) and locale set the count's text and number, for example labels={{ selected: '{count} ausgewählt' }} locale="de-DE". It is a server part, so a NizivoConfig's labels do not reach it: pass labels on each instance.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { BulkActionBar } from '@nizivo/react/bulk-action-bar';

export function BulkActionBarExample(): JSX.Element {
  return (
    <BulkActionBar style={{ maxInlineSize: 560 }}>
      <Button size="sm" variant="secondary">
        Archive
      </Button>
      <Button size="sm" variant="critical">
        Delete
      </Button>
    </BulkActionBar>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

BulkActionBarLabels type

import type { BulkActionBarLabels } from '@nizivo/react/bulk-action-bar'

BulkActionBar's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
selectedrequired	string	'{count} selected'	The count of selected rows, with {count}.

BulkActionBarProps type

import type { BulkActionBarProps } from '@nizivo/react/bulk-action-bar'

The props of BulkActionBar, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-bulk-action-bar, .nz-bulk-action-bar-actions, .nz-bulk-action-bar-count.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none