Link

UI::Link

A link styled as text or as a button.

bin/rails generate velvetkit:add link

Also adds: Icon
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

Variants

Link Default Secondary Outline Ghost Destructive

variants.html.erb

<div class="flex flex-wrap items-center gap-3">
  <%= render(UI::Link.new(href: "#", variant: :link)) { "Link" } %>
  <%= render(UI::Link.new(href: "#", variant: :default, button_variant: true)) { "Default" } %>
  <%= render(UI::Link.new(href: "#", variant: :secondary, button_variant: true)) { "Secondary" } %>
  <%= render(UI::Link.new(href: "#", variant: :outline, button_variant: true)) { "Outline" } %>
  <%= render(UI::Link.new(href: "#", variant: :ghost, button_variant: true)) { "Ghost" } %>
  <%= render(UI::Link.new(href: "#", variant: :destructive, button_variant: true)) { "Destructive" } %>
</div>

Sizes

Small Default Large

sizes.html.erb

<div class="flex flex-wrap items-center gap-3">
  <%= render(UI::Link.new(href: "#", variant: :default, size: :sm, button_variant: true)) { "Small" } %>
  <%= render(UI::Link.new(href: "#", variant: :default, size: :default, button_variant: true)) { "Default" } %>
  <%= render(UI::Link.new(href: "#", variant: :default, size: :lg, button_variant: true)) { "Large" } %>
</div>

With Icons

Learn more Continue

with_icons.html.erb

<div class="flex flex-wrap items-center gap-4">
  <%= render(UI::Link.new(href: "#", variant: :link)) do |link| %>
    <% link.with_leading_icon(name: :info) %>
    Learn more
  <% end %>

  <%= render(UI::Link.new(href: "#", variant: :default)) do |link| %>
    <% link.with_trailing_icon(name: "arrow-right") %>
    Continue
  <% end %>
</div>

API

Arguments

UI::Link.new(href: "#", variant: :link, size: :default, button_variant: false, truncate: false, class: nil, **html_attrs)

Slots: with_leading_icon with_trailing_icon