Back to Compositions

BulkActionBar

Data Display

Floating bar for bulk operations on selected items

Composed from
BoxButtonText
Example
3 selected
DeleteEdit
Usage
import { BulkActionBar } from '@/components/polaris';

function Example() {
    return (
        <BulkActionBar
            selectedCount={3}
            primaryAction={{
                label: 'Edit selected',
                onAction: () => console.log('edit'),
            }}
            secondaryActions={[
                { label: 'Export', onAction: () => console.log('export') },
                { label: 'Delete', destructive: true, onAction: () => console.log('delete') },
            ]}
        />
    );
}