BulkActionBar
Enables the user to perform an action on multiple items at the same time.The <BulkActionBar /> component is used together with a table to implement a consistent bulk action experience. It displays a count of selected rows, one or multiple actions the user can make, and a "Cancel" button.
NOTE: Refer to the Bulk actions pattern for guidelines and UX considerations to keep in mind when using this component.
The selectedCount prop is always required and will render as "1 selected" for example.
Optionally, you can use the totalCount prop if you wish to display the selected count together with the total count. Together with selected count this will render as "1 / 3 selected".
To provide the bulk action bar with actions, you have to pass the interactive element via children.
- Single: Use a neutral Button if there is only one action available.
- Multiple: Use an ActionsDropdown with a neutral button (default) as trigger if there are many actions available.
If the bulk action is part of stepped user flow – i.e. there's only one bulk action that also takes the user to a new UI – then a bulk action bar component may not be needed. Instead, consider having a primary button to represent the bulk action placed below the table.
Use the onCancel prop to pass a function that gets invoked when the user presses the "Cancel" button.
Following the Bulk actions pattern it should:
- Clear all selections.
- Remove the bulk action bar from the UI.
The bulk action bar should always be placed directly above the table with a small (12px) gap between.