BetterUi Demo

Variants

All 9 semantic color variants with the default style.

Primary Secondary Accent Success Danger Warning Info Light Dark

<%= bui_link("#", variant: :primary) { "Primary" } %>
<%= bui_link("#", variant: :secondary) { "Secondary" } %>
<%= bui_link("#", variant: :accent) { "Accent" } %>
<%= bui_link("#", variant: :success) { "Success" } %>
<%= bui_link("#", variant: :danger) { "Danger" } %>
<%= bui_link("#", variant: :warning) { "Warning" } %>
<%= bui_link("#", variant: :info) { "Info" } %>
<%= bui_link("#", variant: :light) { "Light" } %>
<%= bui_link("#", variant: :dark) { "Dark" } %>

Styles

Three visual styles: default, underline, and ghost. Shown with primary, success, and danger variants.

Default

Primary Success Danger

Underline

Primary Success Danger

Ghost

Primary Success Danger

<%# Default style %>
<%= bui_link("#", variant: :primary, style: :default) { "Primary" } %>

<%# Underline style %>
<%= bui_link("#", variant: :primary, style: :underline) { "Primary" } %>

<%# Ghost style (adds background on hover) %>
<%= bui_link("#", variant: :primary, style: :ghost) { "Primary" } %>

Sizes

Five sizes from extra-small to extra-large.

Extra Small Small Medium Large Extra Large

<%= bui_link("#", variant: :primary, size: :xs) { "Extra Small" } %>
<%= bui_link("#", variant: :primary, size: :sm) { "Small" } %>
<%= bui_link("#", variant: :primary, size: :md) { "Medium" } %>
<%= bui_link("#", variant: :primary, size: :lg) { "Large" } %>
<%= bui_link("#", variant: :primary, size: :xl) { "Extra Large" } %>

External Links

Links with target="_blank" automatically get rel="noopener noreferrer" for security.

GitHub Ruby on Rails Tailwind CSS

<%# Opens in new tab with automatic rel="noopener noreferrer" %>
<%= bui_link("https://github.com", variant: :primary, target: "_blank") { "GitHub" } %>
<%= bui_link("https://rubyonrails.org", variant: :danger, style: :underline, target: "_blank") { "Ruby on Rails" } %>

Disabled Links

Disabled links are visually muted and non-interactive.

Disabled Default Disabled Underline Disabled Ghost

<%= bui_link("#", variant: :primary, disabled: true) { "Disabled Default" } %>
<%= bui_link("#", variant: :success, style: :underline, disabled: true) { "Disabled Underline" } %>
<%= bui_link("#", variant: :danger, style: :ghost, disabled: true) { "Disabled Ghost" } %>

With Icons

Links support icon_before and icon_after slots for inline SVG icons.

Icon Before

Home Approved

Icon After

Next Page External Link

Both Icons

Download Report

<%# Icon before the link text %>
<%= bui_link("#", variant: :primary) do |link| %>
  <% link.with_icon_before do %>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3..." />
    </svg>
  <% end %>
  Home
<% end %>

<%# Icon after the link text %>
<%= bui_link("#", variant: :primary) do |link| %>
  <% link.with_icon_after do %>
    <svg class="w-4 h-4" ...>...</svg>
  <% end %>
  Next Page
<% end %>

<%# Both icons %>
<%= bui_link("#", variant: :accent, style: :underline) do |link| %>
  <% link.with_icon_before do %>
    <svg class="w-4 h-4" ...>...</svg>
  <% end %>
  <% link.with_icon_after do %>
    <svg class="w-4 h-4" ...>...</svg>
  <% end %>
  Download Report
<% end %>