Components

ActionBar

Bulk actions for selected items; it appears with the first selection and says how many items are selected.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { ActionBar } from '@bigbang/ui';
Source: ActionBar.tsx
Storybook: ActionBar · Playground

ActionBar is in the @bigbang/ui package. It uses the Toolbar parts for its actions.

import { ActionBar, ToolbarButton } from '@bigbang/ui';

<ActionBar count={selected.length} onClear={() => setSelected([])}>
  <ToolbarButton label="Archive" icon="download" onClick={archiveSelected} />
</ActionBar>;

Props

countRequired

Description: How many items are selected. The bar shows while it is above 0 and announces each change.
Type: number

onClearRequired

Description: Clears the selection. Shown as the bar's first button; Escape inside the bar calls it too.
Type: () => void

childrenRequired

Description: Actions for the selected items, as ToolbarButton and ToolbarSeparator. Keep three to five.
Type: ReactNode

placement

Description: floating fixes the bar to the bottom of the viewport; inline places it where you render it, such as above a table.
Type: 'floating' | 'inline'
Default: 'floating'

label

Description: Name of the action group for screen readers. Defaults to "Toplu eylemler" or "Bulk actions" from the Provider.
Type: string

countLabel

Description: Text for the count, such as (n) => n + ' dosya seçildi'. Defaults to "{count} öğe seçildi" or "{count} selected".
Type: (count: number) => string

material

Description: 'solid' keeps the bar solid under a glass Provider.
Type: 'auto' | 'solid'
Default: 'auto'

className

Description: For layout only: margins and placement.
Type: string

Data attributes

data-component="action-bar": on the display: contents root that wraps the parts.
data-part="bar" and data-part="count": on the bar and the count text.