ActionBar

ActionBar surfaces bulk actions for a selection inside a collection. It sits in an ActionBarContainer alongside the collection, showing the number of selected items and the actions that apply to them, and clears the selection on demand.

Import

import {
  ActionBar,
  ActionBarContainer,
  ActionButton
} from '@proyecto-viviana/solid-spectrum';

Selection actions

The container overlays the ActionBar once items are selected. It reports the count and exposes an onClearSelection handler wired to the clear affordance.

Project AuroraProject BorealisProject Cascade

2 selected

<ActionBarContainer>
  {/* your collection */}
  <ActionBar
    selectedItemCount={count()}
    onClearSelection={() => setCount(0)}
  >
    <ActionButton>Edit</ActionButton>
    <ActionButton>Duplicate</ActionButton>
    <ActionButton>Delete</ActionButton>
  </ActionBar>
</ActionBarContainer>

ActionBarContainer Props

Props

Prop	Type	Default	Description
`children`	JSX.Element	—	The collection and the ActionBar it applies to

ActionBar Props

Props

Prop	Type	Default	Description
`selectedItemCount`	number \| 'all'	—	How many items are selected; the bar is hidden when 0
`onClearSelection`	() => void	—	Handler for the clear-selection affordance
`isEmphasized`	boolean	`false`	Whether the bar uses the emphasized (accent) treatment
`children`	JSX.Element	—	ActionButton elements representing the bulk actions

Accessibility

The bar exposes a toolbar role grouping its actions
The selected-item count is announced when the bar appears
Escape triggers onClearSelection and returns focus to the collection
Arrow keys move between the actions with a roving tabindex
The clear affordance is a labelled button reachable by keyboard