Avo::ButtonComponent
This component renders a button or a link with Avo's button styling. It powers the a_button and a_link helpers you'll see throughout the docs.
<%= render Avo::ButtonComponent.new(style: :primary, icon: "tabler/outline/arrow-up") do %>
Label
<% end %>The two helpers are thin wrappers around this component:
<%# Renders a <button> %>
<%= a_button(style: :primary, icon: "tabler/outline/arrow-up") do %>
Label
<% end %>
<%# Renders an <a> link %>
<%= a_link("/admin", style: :outline) do %>
Admin
<% end %>Options
All options are optional.
-> path
The first positional argument. When the component is rendered as a link (is_link: true, or via the a_link helper) this is the link's href.
Type
String
<%= a_link("/admin") { "Admin" } %>-> style
The visual style of the button.
Type
Symbol — one of :primary, :outline, :text
Default
:outline
<%= a_button(style: :primary) { "Primary" } %>
<%= a_button(style: :outline) { "Outline" } %>
<%= a_button(style: :text) { "Text" } %>-> size
The size of the button.
Type
Symbol — one of :xs, :sm, :md, :lg
Default
:md
<%= a_button(size: :sm) { "Small" } %>
<%= a_button(size: :lg) { "Large" } %>-> rounded
The corner shape of the button. Leave it unset for the standard radius, or pass :full for a pill shape. It's an orthogonal modifier, so it combines with any style, size, or color.
Type
Symbol — :full (defaults to nil, the standard radius)
Default
nil
<%= a_button(rounded: :full) { "Pill" } %>
<%= a_button(style: :primary, rounded: :full, icon: "tabler/outline/plus") { "New" } %>-> color
The accent color of the button. Accepts Avo's semantic colors or any Tailwind color name.
Type
Symbol — :primary, :accent, or a Tailwind color such as :red, :green, :blue, :gray, …
Default
nil
<%= a_button(color: :red) { "Delete" } %>
<%= a_button(style: :primary, color: :accent) { "Save" } %>-> padding
Tightens the button to equal padding on all sides. Useful for compact or icon-only buttons. Icon-only buttons already get tightened padding automatically.
Type
Symbol — :sm or :xs
Default
nil
<%= a_button(padding: :sm, icon: "tabler/outline/dots") %>-> icon
A leading icon, using the icon naming convention (e.g. tabler/outline/paperclip or heroicons/solid/academic-cap).
Type
String
<%= a_button(icon: "tabler/outline/arrow-up") { "Upload" } %>-> end_icon
A trailing icon, rendered after the label.
Type
String
<%= a_button(end_icon: "tabler/outline/arrow-right") { "Next" } %>-> icon_class
-> is_link
Renders an <a> tag instead of a <button>. The a_link helper sets this for you.
Type
Boolean
Default
false
-> aria
-> class
-> args
Any remaining keyword arguments are forwarded to the underlying link_to / button_to / button_tag helper. This is how you set things like method:, data:, title:, or loading:.
Type
Hash
<%= a_link("/posts/1", method: :delete, data: { turbo_confirm: "Are you sure?" }) do %>
Delete
<% end %>