Components / Shortcut Key

Shortcut Key

Stable

displaying keyboard shortcuts in tooltips and menus

Open command menu Cmd K

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

<div class="flex items-center gap-3">
  <span class="text-sm text-[hsl(var(--senren-muted-foreground))]">Open command menu</span>
  <%= render Senren::ShortcutKeyComponent.new(keys: ["Cmd", "K"]) %>
</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 shortcut_key

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 shortcut_key --no-client

At a glance #

Category Navigation

Class name Senren::ShortcutKeyComponent

Stimulus —

Variants default

Depends on —

Pairs with tooltip, command

Source #

app/components/senren/shortcut_key_component.html.erb

<span <%= tag.attributes(**root_attrs("inline-flex items-center gap-1 text-xs text-[hsl(var(--senren-muted-foreground))]")) %>>
  <% (keys.presence || [content]).compact.each_with_index do |key, index| %>
    <% if index.positive? %><span aria-hidden="true">+</span><% end %>
    <kbd class="rounded border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-muted))] px-1.5 py-0.5 font-mono text-[11px] text-[hsl(var(--senren-foreground))] shadow-sm"><%= key %></kbd>
  <% end %>
</span>

app/components/senren/shortcut_key_component.rb

# frozen_string_literal: true

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

    def initialize(keys: [], class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @keys = Array(keys)
    end

    attr_reader :keys
  end
end

AI agent rules #

Use for

+displaying keyboard shortcuts in tooltips and menus

Avoid

-as a button - shortcut_key is presentational

Accessibility #

Use kbd elements; avoid relying on key visuals alone for instructions.

Theme Toggle

Table