Button
Displays a button or a component that looks like a button.
Usage
Example
Button { "Button" }
Copied!
Copy failed!
Primary
Button(variant: :primary) { "Primary" }
Copied!
Copy failed!
Secondary
Button(variant: :secondary) { "Secondary" }
Copied!
Copy failed!
Destructive
Button(variant: :destructive) { "Destructive" }
Copied!
Copy failed!
Outline
Button(variant: :outline) { "Outline" }
Copied!
Copy failed!
Ghost
Button(variant: :ghost) { "Ghost" }
Copied!
Copy failed!
Link
Button(variant: :link) { "Link" }
Copied!
Copy failed!
Icon
Button(variant: :outline, icon: true) do svg( xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 20 20", fill: "currentColor", class: "w-5 h-5" ) do |s| s.path( fill_rule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clip_rule: "evenodd" ) end end
Copied!
Copy failed!
With icon
Button(variant: :primary) do svg( xmlns: "http://www.w3.org/2000/svg", fill: "none", viewbox: "0 0 24 24", stroke_width: "1.5", stroke: "currentColor", class: "w-4 h-4 mr-2" ) do |s| s.path( stroke_linecap: "round", stroke_linejoin: "round", d: "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" ) end span { "Login with Email" } end
Copied!
Copy failed!
With icon
Button(variant: :primary, disabled: true) do svg( xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 20 20", fill: "currentColor", class: "w-4 h-4 mr-2 animate-spin" ) do |s| s.path( fill_rule: "evenodd", d: "M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z", clip_rule: "evenodd" ) end span { "Please wait" } end
Copied!
Copy failed!
Submit
Button(variant: :primary, type: :submit) do span { "Submit application" } end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Button
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Button
to app/components/ruby_ui/button.rb
# frozen_string_literal: true module RubyUI class Button < Base def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs) @type = type @variant = variant.to_sym @size = size.to_sym @icon = icon super(**attrs) end def view_template(&) button(**attrs, &) end private def size_classes if @icon case @size when :sm then "h-6 w-6" when :md then "h-9 w-9" when :lg then "h-10 w-10" when :xl then "h-12 w-12" end else case @size when :sm then "px-3 py-1.5 h-8 text-xs" when :md then "px-4 py-2 h-9 text-sm" when :lg then "px-4 py-2 h-10 text-base" when :xl then "px-6 py-3 h-12 text-base" end end end def primary_classes [ "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90", size_classes ] end def link_classes [ "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline", size_classes ] end def secondary_classes [ "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80", size_classes ] end def destructive_classes [ "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", size_classes ] end def outline_classes [ "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", size_classes ] end def ghost_classes [ "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground", size_classes ] end def default_classes case @variant when :primary then primary_classes when :link then link_classes when :secondary then secondary_classes when :destructive then destructive_classes when :outline then outline_classes when :ghost then ghost_classes end end def default_attrs { type: @type, class: default_classes } end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Button | Phlex |