Buttons

Button

Button Variants

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", margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>

Button Full Width

This button is used many times for mobile or other things like cards and sidebars.

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

Button Links

A Tag Button Open in new Window Open in a Child Tab A Tag Button Disabled

The link prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the newWindow prop (boolean), which will open the link in a new window, or by calling the target prop, which accepts _self, _blank, _parent, _top, child, or any string, allowing you to specify any link target.

<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com", margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "Open in a Child Tab", aria: { label: "Link to Playbook in new window" }, link: "https://playbook.powerapp.cloud/", margin_right: "lg", target: "child"}) %>
<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com", margin_right: "lg" }) %>

Button Loading

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, margin_right: "lg" }) %>
<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>

Button Block Content

Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a <span> element inside the button.

<%= pb_rails("button") do %>
  <%= pb_rails("pill", props: { text:"5", fixed_width: true, margin_right: "xs", variant:"info" }) %>
  <span>Button with Block Content</span>
<% end %>

Button Icon Options

Icons can also be added to a button if needed. By default, the icon will be displayed on the left of the text. To display the icon on the right, use the optional prop of iconRight in react or icon_right in rails.

<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right", margin_right: "lg" }) %>

Button Accessibility Options

Button with ARIA

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

Button Additional Options

<%= pb_rails("button", props: { text: "Button with options", value: "1234", type: "submit" }) %>

Button Size

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", margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "Button md size", size: "md", margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "Button lg size", size: "lg", margin_right: "lg" }) %>

Button Form Attribute

<%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>

Button Toolbar

Default

<div class="pb--doc-demo-row">

  <%= pb_rails("button_toolbar", props: { orientation: "vertical" }) do %>
    <%= pb_rails("button", props: { text: "Create" }) %>
    <%= pb_rails("button", props: { text: "Edit"}) %>
    <%= pb_rails("button", props: { text: "Copy"}) %>
    <%= pb_rails("button", props: { text: "Cut"}) %>
  <% end %>

  <%= pb_rails("button_toolbar", props: { orientation: "horizontal" }) do %>
    <%= pb_rails("button", props: { text: "Create" }) %>
    <%= pb_rails("button", props: { text: "Edit" }) %>
    <%= pb_rails("button", props: { text: "Copy" }) %>
    <%= pb_rails("button", props: { text: "Cut" }) %>
  <% end %>

</div>

Secondary

<div class="pb--doc-demo-row">

  <%= pb_rails("button_toolbar", props: { orientation: "vertical", variant: "secondary" }) do %>
    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
  <% end %>

  <%= pb_rails("button_toolbar", props: { orientation: "horizontal", variant: "secondary" }) do %>
    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
  <% end %>

</div>

Circle Icon Button

Default

<%= pb_rails("circle_icon_button", props: {
  variant: "primary",
  icon: "plus"
}) %>

<br/>

<%= pb_rails("circle_icon_button", props: {
  variant: "secondary",
  icon: "pen"
}) %>

<br/>

<%= pb_rails("circle_icon_button", props: {
  disabled: true,
  icon: "times"
}) %>

<br/>

<%= pb_rails("circle_icon_button", props: {
  variant: "link",
  icon: "user"
}) %>

Link

<%= pb_rails("circle_icon_button", props: {
  variant: "primary",
  icon: "search",
  link: "https://google.com"
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
  variant: "secondary",
  icon: "window",
  link: "https://google.com",
  new_window: true
}) %>