Senren UI
Components / Bulk Action Bar

Bulk Action Bar

Stable

acting on multiple selected rows

3 customers selected

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../bulk_action_bar_example.html.erb 
<div class="w-full max-w-xl">
  <%= render Senren::BulkActionBarComponent.new(selected_count: 3, item_label: "customers") do |bar| %>
    <% bar.with_actions do %>
      <%= render(Senren::ButtonComponent.new(variant: :secondary, size: :sm)) { "Archive" } %>
      <%= render(Senren::ButtonComponent.new(variant: :destructive, size: :sm)) { "Delete" } %>
    <% end %>
  <% end %>
</div>

Install this component #

Copy the official component into your app

Use this when you want the Senren-maintained implementation copied into app/components/senren.

Terminal 
bin/rails senren:add bulk_action_bar

Create a custom component with the same conventions

Use this when you need an app-specific static component that follows Senren's ViewComponent structure.

Terminal 
bin/rails generate senren:component bulk_action_bar --no-client

Dependencies are resolved by senren:add: button, dropdown_menu.

At a glance #

Category Saas
Class name Senren::BulkActionBarComponent
Stimulus —
Variants default
Depends on button, dropdown_menu
Pairs with data_table, table

Source #

app/components/senren/bulk_action_bar_component.html.erb 
<%= tag.div(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-foreground))] p-3 text-[hsl(var(--senren-background))] shadow-md", role: "status", "aria-live": "polite")) do %>
  <% if content? && selected_count.nil? && !actions? %>
    <%= content %>
  <% else %>
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div class="text-sm font-medium"><%= selection_text || "Selection ready" %></div>
      <% if actions? %>
        <div class="flex flex-wrap items-center gap-2"><%= actions %></div>
      <% end %>
    </div>
  <% end %>
<% end %>
app/components/senren/bulk_action_bar_component.rb 
# frozen_string_literal: true

module Senren
  class BulkActionBarComponent < BaseComponent
    renders_one :actions

    VARIANTS = { default: '' }.freeze
    SIZES = { md: '' }.freeze

    def initialize(selected_count: nil, item_label: 'items', class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @selected_count = selected_count
      @item_label = item_label
    end

    attr_reader :selected_count, :item_label

    def selection_text
      return nil if selected_count.nil?

      "#{selected_count} #{item_label} selected"
    end
  end
end

AI agent rules #

Use for

  • +acting on multiple selected rows

Avoid

  • -single-row actions - use dropdown_menu

Accessibility #

  • Show count of selected items in an aria-live region.