Components / Link

Link

Stable

in-app navigation

Default link Muted link Destructive link

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

<div class="flex flex-wrap items-center justify-center gap-6 text-sm">
  <%= render(Senren::LinkComponent.new(href: "#"))                    { "Default link" } %>
  <%= render(Senren::LinkComponent.new(href: "#", variant: :muted))   { "Muted link" } %>
  <%= render(Senren::LinkComponent.new(href: "#", variant: :destructive)) { "Destructive link" } %>
</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 link

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

At a glance #

Category Actions

Class name Senren::LinkComponent

Stimulus —

Variants default, muted, destructive

Depends on —

Pairs with button, breadcrumb

Source #

app/components/senren/link_component.html.erb

<%= tag.a content, **root_attrs("inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--senren-ring))] rounded-sm", href: href, **external_attrs) %>

app/components/senren/link_component.rb

# frozen_string_literal: true

module Senren
  class LinkComponent < BaseComponent
    VARIANTS = {
      default: 'text-[hsl(var(--senren-primary))] hover:underline underline-offset-4',
      muted: 'text-[hsl(var(--senren-muted-foreground))] hover:underline underline-offset-4',
      destructive: 'text-[hsl(var(--senren-destructive))] hover:underline underline-offset-4'
    }.freeze

    SIZES = { md: '' }.freeze

    def initialize(href:, variant: :default, external: false, class_name: nil, **html)
      super(variant: variant, size: :md, class_name: class_name, **html)
      @href = href
      @external = external
    end

    attr_reader :href, :external

    def external_attrs
      external ? { rel: 'noopener noreferrer', target: '_blank' } : {}
    end
  end
end

AI agent rules #

Use for

+in-app navigation
+external links

Avoid

-triggering destructive actions via a link

Accessibility #

Use real anchors for navigation
never buttons.

Button

Badge