Icon Button

Buttons containing only an icon, for compact actions.

Basic Icon Buttons

Square buttons with centered icons.

<%= render Rvk::IconButtonComponent.new do %>
  <%= render Rvk::IconComponent.new(name: :pencil, variant: :solid) %>
<% end %>

<%= render Rvk::IconButtonComponent.new do %>
  <%= render Rvk::IconComponent.new(name: :trash, variant: :solid) %>
<% end %>

Sizes

Icon buttons come in 3 sizes.

<%= render Rvk::IconButtonComponent.new(size: :sm) do %>
  <%= render Rvk::IconComponent.new(name: :heart, size: :sm, variant: :solid) %>
<% end %>

<%= render Rvk::IconButtonComponent.new(size: :md) do %>
  <%= render Rvk::IconComponent.new(name: :heart, variant: :solid) %>
<% end %>

<%= render Rvk::IconButtonComponent.new(size: :lg) do %>
  <%= render Rvk::IconComponent.new(name: :heart, size: :lg, variant: :solid) %>
<% end %>

Toolbar Example

Common pattern for editor toolbars.

<div class="flex items-center gap-1 p-1 bg-surface-100 rounded-lg">
  <%= render Rvk::IconButtonComponent.new(size: :sm) do %>
    <%= render Rvk::IconComponent.new(name: :link, size: :sm, variant: :solid) %>
  <% end %>
  <%= render Rvk::IconButtonComponent.new(size: :sm) do %>
    <%= render Rvk::IconComponent.new(name: :photo, size: :sm, variant: :solid) %>
  <% end %>
</div>

As Link

Pass href to render as an anchor tag.

<%= render Rvk::IconButtonComponent.new(href: "/settings") do %>
  <%= render Rvk::IconComponent.new(name: :cog, variant: :solid) %>
<% end %>

Props

Prop	Type	Default	Description
size	Symbol	:md	Button size: :sm, :md, :lg
href	String	nil	If provided, renders as an <a> tag
disabled	Boolean	false	Disable the button