Buttons
Interactive button components with multiple variants, styles, sizes, and states.
Variants (Solid Style)
All 9 semantic color variants rendered as solid buttons.
<%= bui_button(variant: :primary) { "Primary" } %>
<%= bui_button(variant: :secondary) { "Secondary" } %>
<%= bui_button(variant: :accent) { "Accent" } %>
<%= bui_button(variant: :success) { "Success" } %>
<%= bui_button(variant: :danger) { "Danger" } %>
<%= bui_button(variant: :warning) { "Warning" } %>
<%= bui_button(variant: :info) { "Info" } %>
<%= bui_button(variant: :light) { "Light" } %>
<%= bui_button(variant: :dark) { "Dark" } %>Visual Styles
Four visual styles: solid, outline, ghost, and soft. Shown with primary, success, and danger variants.
Solid
Outline
Ghost
Soft
<%# Solid (default) %>
<%= bui_button(variant: :primary, style: :solid) { "Primary" } %>
<%# Outline %>
<%= bui_button(variant: :primary, style: :outline) { "Primary" } %>
<%# Ghost %>
<%= bui_button(variant: :primary, style: :ghost) { "Primary" } %>
<%# Soft %>
<%= bui_button(variant: :primary, style: :soft) { "Primary" } %>Sizes
Five sizes from extra-small to extra-large.
<%= bui_button(variant: :primary, size: :xs) { "Extra Small" } %>
<%= bui_button(variant: :primary, size: :sm) { "Small" } %>
<%= bui_button(variant: :primary, size: :md) { "Medium" } %>
<%= bui_button(variant: :primary, size: :lg) { "Large" } %>
<%= bui_button(variant: :primary, size: :xl) { "Extra Large" } %>Loading States
Buttons can show a loading spinner immediately or on click.
Show Loader (always visible)
Show Loader on Click (click to see)
<%# Always show loader %>
<%= bui_button(variant: :primary, show_loader: true) { "Loading..." } %>
<%# Show loader on click %>
<%= bui_button(variant: :primary, show_loader_on_click: true) { "Click Me" } %>Disabled State
Disabled buttons across different visual styles.
<%= bui_button(variant: :primary, style: :solid, disabled: true) { "Solid Disabled" } %>
<%= bui_button(variant: :primary, style: :outline, disabled: true) { "Outline Disabled" } %>
<%= bui_button(variant: :primary, style: :ghost, disabled: true) { "Ghost Disabled" } %>Button Types
HTML button types: button (default), submit, and reset.
<%= bui_button(variant: :primary, type: :button) { "Button (default)" } %>
<%= bui_button(variant: :success, type: :submit) { "Submit" } %>
<%= bui_button(variant: :warning, type: :reset) { "Reset" } %>Link Buttons
Buttons with an href render as anchor tags, combining button styling with link behavior.
<%# Renders as <a> tag with button styling %>
<%= bui_button(variant: :primary, href: demos_path) { "Internal Link" } %>
<%# External link with target="_blank" %>
<%= bui_button(variant: :accent, style: :outline, href: "https://github.com", target: "_blank") { "External Link" } %>
<%# Disabled link button %>
<%= bui_button(variant: :danger, style: :soft, href: "#", disabled: true) { "Disabled Link" } %>