# VelvetKit

## Link (`UI::Link`)

A link styled as text or as a button.

Add it: `bin/rails generate velvetkit:add link`

Also adds: `icon`

### Arguments

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

Slots: `with_leading_icon`, `with_trailing_icon`

### Example: Variants

```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>
```

### Example: Sizes

```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>
```

### Example: With Icons

```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>
```