EEnterUI
DocsComponentsThemesDonation
Get Started
      • BulkActionBar
      • BulkEditPanel
EnterUIDocsData AnalyticsTables and DataBulk WorkflowsBulkEditPanel
Data AnalyticsUpdated 6 May 2026

BulkEditPanel

Sticky selection panel for applying actions to many items.

BulkEditPanel appears when a selection is active and keeps batch actions close to the working context without taking over the page.

#Default usage

Bulk edit selection

Use a compact sticky panel for selected rows.

8selected
Code
<BulkEditPanel
  selectedCount={8}
  actions={
    <>
      <Button variant="secondary" size="sm">Assign owner</Button>
      <Button variant="destructive" size="sm">Archive</Button>
    </>
  }
/>

#Import

Code
import { BulkEditPanel } from "@froggdesign/enter-ui-react";

#Patterns

Use BulkEditPanel below tables, grids, inboxes, and task queues after row selection. Keep actions direct and task-oriented.

#Accessibility

The panel renders as a labelled region, includes the selected count, and gives the clear selection button an explicit label.

#API

  • selectedCount: number displayed in the panel label.
  • actions: action buttons or menus for the current selection.
  • children: optional supporting content.
  • onClearSelection: called from the clear selection button.
  • open: when false, the panel is not rendered.

#Styling

BulkEditPanel uses .eui-bulk-edit-panel classes and FroggDesign tokens for layout, state, focus, and disabled styling.

PreviousBulkActionBar
NextColumnVisibilityMenu

On this page

  1. Default usage
  2. Import
  3. Patterns
  4. Accessibility
  5. API
  6. Styling