Button

Button - Phlex implementation

Examples

Primary

The default button style.

<%= render "ui/button", content: "Button" %>

<%= render UI::Button.new { "Button" } %>

<%= render(UI::ButtonComponent.new) { "Button" } %>

Secondary

A secondary button style.

<%= render "ui/button", variant: "secondary", content: "Secondary" %>

<%= render UI::Button.new(variant: "secondary") { "Secondary" } %>

<%= render(UI::ButtonComponent.new(variant: "secondary")) { "Secondary" } %>

Destructive

A destructive button for dangerous actions.

<%= render "ui/button", variant: "destructive", content: "Destructive" %>

<%= render UI::Button.new(variant: "destructive") { "Destructive" } %>

<%= render(UI::ButtonComponent.new(variant: "destructive")) { "Destructive" } %>

Outline

An outline button style.

<%= render "ui/button", variant: "outline", content: "Outline" %>

<%= render UI::Button.new(variant: "outline") { "Outline" } %>

<%= render(UI::ButtonComponent.new(variant: "outline")) { "Outline" } %>

Ghost

A ghost button style.

<%= render "ui/button", variant: "ghost", content: "Ghost" %>

<%= render UI::Button.new(variant: "ghost") { "Ghost" } %>

<%= render(UI::ButtonComponent.new(variant: "ghost")) { "Ghost" } %>

Link

A link-styled button.

<%= render "ui/button", variant: "link", content: "Link" %>

<%= render UI::Button.new(variant: "link") { "Link" } %>

<%= render(UI::ButtonComponent.new(variant: "link")) { "Link" } %>

Sizes

Different button sizes.

<div class="flex flex-wrap items-center gap-4">
  <%= render "ui/button", size: "sm", content: "Small" %>
  <%= render "ui/button", size: "default", content: "Default" %>
  <%= render "ui/button", size: "lg", content: "Large" %>
</div>

<div class="flex flex-wrap items-center gap-4">
  <%= render UI::Button.new(size: "sm") { "Small" } %>
  <%= render UI::Button.new(size: "default") { "Default" } %>
  <%= render UI::Button.new(size: "lg") { "Large" } %>
</div>

<div class="flex flex-wrap items-center gap-4">
  <%= render(UI::ButtonComponent.new(size: "sm")) { "Small" } %>
  <%= render(UI::ButtonComponent.new(size: "default")) { "Default" } %>
  <%= render(UI::ButtonComponent.new(size: "lg")) { "Large" } %>
</div>

Disabled

A disabled button.

<%= render "ui/button", disabled: true, content: "Disabled" %>

<%= render UI::Button.new(disabled: true) { "Disabled" } %>

<%= render(UI::ButtonComponent.new(disabled: true)) { "Disabled" } %>

Icon

A button with only an icon.

<%= render "ui/button", variant: "outline", size: "icon" do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
<% end %>

<%= render UI::Button.new(variant: "outline", size: "icon") do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
<% end %>

<%= render(UI::ButtonComponent.new(variant: "outline", size: "icon")) do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
<% end %>

With Icon

A button with an icon and text.

<%= render "ui/button" do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
  Upload
<% end %>

<%= render UI::Button.new do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
  Upload
<% end %>

<%= render(UI::ButtonComponent.new) do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
  Upload
<% end %>

Rounded

A fully rounded button.

<%= render "ui/button", classes: "rounded-full", content: "Rounded" %>

<%= render UI::Button.new(classes: "rounded-full") { "Rounded" } %>

<%= render(UI::ButtonComponent.new(classes: "rounded-full")) { "Rounded" } %>

Loading

A button in loading state.

<%= render "ui/button", disabled: true do %>
  <svg class="animate-spin -ml-1 mr-2 size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Please wait
<% end %>

<%= render UI::Button.new(disabled: true) do %>
  <svg class="animate-spin -ml-1 mr-2 size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Please wait
<% end %>

<%= render(UI::ButtonComponent.new(disabled: true)) do %>
  <svg class="animate-spin -ml-1 mr-2 size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Please wait
<% end %>

Features

Custom styling with Tailwind classes
Disabled state support
ARIA attributes for accessibility

API Reference

Button

A versatile button component with multiple variants and sizes.

Parameters

Name	Type	Default	Description
variant	String	default	Visual style variant
size	String	default	Size of the element
type	String	button	The type
disabled	Boolean	false	Whether the element is disabled

Group

A container that groups related buttons together with consistent styling.

Parameters

Name	Type	Default	Description
orientation	Symbol	:horizontal	Orientation (horizontal or vertical)

Accessibility

Adheres to theButton WAI-ARIA design pattern

Implements the WAI-ARIA Button pattern with proper roles, states, and keyboard navigation.