Blocks

Link

One styled anchor helper that spans from inline prose to button-styled CTA.

Installation

bin/rails g shadcnrb:component link

Usage

Mirrors Rails' link_to signature. Default is the prose underline (variant: :link); pass any Button variant (:default, :outline, etc.) for a button-styled anchor.

<%= sui.link_to "Read more", "#" %>

Prose variants

Inline text styling — for paragraphs, table cells, nav text.

Link Underline Muted Foreground

<!-- variant: :link -->
<%= sui.link_to "Link", "#", variant: :link %>
<!-- variant: :underline -->
<%= sui.link_to "Underline", "#", variant: :underline %>
<!-- variant: :muted -->
<%= sui.link_to "Muted", "#", variant: :muted %>
<!-- variant: :foreground -->
<%= sui.link_to "Foreground", "#", variant: :foreground %>

Button-style variants

Same visual variants as sui.button — but rendered as an anchor so Rails' link_to semantics (paths, Turbo, target, etc.) flow through.

Default Outline Secondary Ghost Destructive

<!-- variant: :default -->
<%= sui.link_to "Default", "#", variant: :default %>
<!-- variant: :outline -->
<%= sui.link_to "Outline", "#", variant: :outline %>
<!-- variant: :secondary -->
<%= sui.link_to "Secondary", "#", variant: :secondary %>
<!-- variant: :ghost -->
<%= sui.link_to "Ghost", "#", variant: :ghost %>
<!-- variant: :destructive -->
<%= sui.link_to "Destructive", "#", variant: :destructive %>

Sizes

Prose variants use the Link size table (:sm / :default / :lg). Button-style variants use the Button size table (adds :xs, :icon variants, etc.).

Small link Default link Large link Large button

<!-- prose size: :sm -->
<%= sui.link_to "Small link", "#", size: :sm %>
<!-- prose size: :default -->
<%= sui.link_to "Default link", "#" %>
<!-- prose size: :lg -->
<%= sui.link_to "Large link", "#", size: :lg %>
<!-- button-style :outline, size: :lg -->
<%= sui.link_to "Large button", "#", variant: :outline, size: :lg %>

With icon

Pass icon: for a leading icon, or compose inline via a block for more control. Works across prose and button-style variants.

Back to index New file # Read more #

<!-- prose + leading icon -->
<%= sui.link_to "Back to index", "#", icon: :"chevron-left" %>
<!-- button-style + leading icon -->
<%= sui.link_to "New file", "#", variant: :default, icon: :plus %>
<!-- trailing icon via block -->
<%= sui.link_to "#", variant: :outline do %>
  Read more <%= sui.icon :"chevron-right" %>
<% end %>
<!-- icon only (button-style, size :icon) -->
<%= sui.link_to "#", variant: :outline, size: :icon, icon: :settings, "aria-label": "Settings" %>

Icon-only button-style links respect the same size variants.

# # #

<!-- size: :sm -->
<%= sui.link_to "#", variant: :outline, size: :sm, icon: :settings, "aria-label": "Settings" %>
<!-- size: :default -->
<%= sui.link_to "#", variant: :outline, size: :icon, icon: :settings, "aria-label": "Settings" %>
<!-- size: :lg -->
<%= sui.link_to "#", variant: :outline, size: :lg, icon: :settings, "aria-label": "Settings" %>

In prose

Embed inline within paragraphs — text inherits the surrounding color until hover.

Read the documentation or jump straight to examples.

<%= sui.p do %>
  Read the <%= sui.link_to "documentation", "#" %> or jump straight to <%= sui.link_to "examples", "#", variant: :underline %>.
<% end %>

API

Arg	Type	Default	Description
`name`	`String`	`nil`	Link text (or use a block)
`options`	`String / Hash`	`nil`	Path or url_for-compatible options (same as Rails `link_to`)
`variant`	`Symbol`	`:link`	Prose: `:link` `:underline` `:muted` `:foreground`. Button-style: `:default` `:destructive` `:outline` `:secondary` `:ghost`
`size`	`Symbol`	`:default`	Prose sizes: `:sm` `:default` `:lg`. Button-style sizes match `sui.button`.