Components / Clipboard

Clipboard

Stable Stimulus: senren--clipboard

copy to clipboard buttons

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/.../clipboard_example.html.erb

<div class="flex justify-center">
  <%= render Senren::ClipboardComponent.new(value: "bin/rails senren:add button card table", label: "Copy command") %>
</div>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal

bin/rails senren:add clipboard --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal

bin/rails generate senren:component clipboard --client

Dependencies are resolved by senren:add: button.

At a glance #

Category Data

Class name Senren::ClipboardComponent

Stimulus senren--clipboard

Variants default

Depends on button

Pairs with api_key_field, codeblock

Source #

app/components/senren/clipboard_component.html.erb

<div <%= tag.attributes(**root_attrs("inline-flex items-center gap-2", data: { controller: "senren--clipboard", "senren--clipboard-copied-label-value": copied_label })) %>>
  <input type="text" readonly value="<%= value %>" data-senren--clipboard-target="source" class="h-10 rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted)/0.4)] px-3 font-mono text-sm text-[hsl(var(--senren-foreground))]">
  <button type="button" data-senren--clipboard-target="button" data-action="click->senren--clipboard#copy" class="inline-flex h-10 cursor-pointer items-center rounded-(--senren-radius) bg-[hsl(var(--senren-primary))] px-3 text-sm font-medium text-[hsl(var(--senren-primary-foreground))] hover:opacity-90">
    <%= label %>
  </button>
  <span class="sr-only" aria-live="polite" data-senren--clipboard-target="status"></span>
</div>

app/components/senren/clipboard_component.rb

# frozen_string_literal: true

module Senren
  class ClipboardComponent < BaseComponent
    VARIANTS = { default: '' }.freeze
    SIZES = { md: '' }.freeze

    def initialize(value:, label: 'Copy', copied_label: 'Copied', class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @label = label
      @value = value
      @copied_label = copied_label
    end

    attr_reader :label, :value, :copied_label
  end
end

AI agent rules #

Use for

+copy to clipboard buttons

Avoid

-non-text content

Accessibility #

Announce copy success via aria-live region.

Progress

Codeblock