2.9.7






Button

Button Variants


Close
<%= pb_rails("button", props: { text: "Button Primary" }) %>
<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
<%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
<%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
Button Variants Dark


Close
<%= pb_rails("button", props: { 
    text: "Button Primary",
    dark: true 
}) %>

<%= pb_rails("button", props: { 
    text: "Button Secondary", 
    variant: "secondary", 
    dark: true 
}) %>

<%= pb_rails("button", props: { 
    text: "Button Link", 
    variant: "link",
    dark: true
}) %>

<%= pb_rails("button", props: { 
    text: "Button Disabled",
    disabled: true,
    dark: true
}) %>
Button Full Width


Close
<%= pb_rails("button", props: { text: "Button Full Width", full_width: true }) %>
Close
<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>
Button Loading


Close
<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>
Button Block Content


Close
<%= pb_rails("button") do %>
  <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
  <span>Button with Block Content</span>
<% end %>
Button Accessibility Options

Button with ARIA
Close
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>
Button Additional Options


Close
<%= pb_rails("button", props: { text: "Button with options", value: "1234", type: "submit" }) %>
Available Props
id
data
classname
aria
children
dark
disabled
full_width
link
loading
new_window
variant
text
type
value