11.2.6
The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.
<%= 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 }) %>
This button is used many times for mobile or other things like cards and sidebars.
<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %> <%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %> <%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>
Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading.
<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %> <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %> <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>
<%= pb_rails("button") do %> <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %> <span>Button with Block Content</span> <% end %>
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>
<%= pb_rails("button", props: { text: "Button with options", value: "1234", type: "submit" }) %>
By default button has the md size style, even if you don't explicitly pass a size prop.
<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %> <%= pb_rails("button", props: { text: "Button md size", size: "md" }) %> <%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>
Never use more than one primary button on a page at any given time.