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. Danger buttons are used to indicate destructive actions such as deleting.
<%= 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" }) %> <%= pb_rails("button", props: { text: "Button Danger", variant: "danger", margin_right: "lg" }) %>
The reaction variant accepts any HTML Emoji or it's hexa/decimal ref (see here) as a string within the icon prop. If nothing is passed to the icon prop, the default reaction button will be displayed as seen in the third example. The default reaction button will also be rendered if a Fontawesome icon (not an Emoji) is passed to the icon prop of a reaction variant, but the default "smiley +" icon will be replaced with the named icon.
Reaction buttons also accept two additional (optional) props: count, which accepts a number (i.e., a count of reactions) to be displayed next to the Emoji; and highlight, which is a boolean that if true, displays the 'active' state for the button. Click the first reaction button to see this in action!
<%= pb_rails("button", props: { count: 153, highlight: false, icon: "🎉", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %> <%= pb_rails("button", props: { count: 5, icon: "1️⃣", variant: "reaction", margin_left: "lg" }) %> <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %> <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %> <script> function renderButtonReaction() { let highlightActive = false; function toggleHighlight() { let reactionCount = 153; console.log("toggleHighlight", highlightActive) highlightActive = !highlightActive; const innerCountElement = document.querySelector(".count .pb_caption_kit_xs.pl_xxs") const firstButton = document.getElementById("reaction-button-highlight") firstButton.classList.add(highlightActive && "active") firstButton.classList.remove(!highlightActive && "active") innerCountElement.innerHTML = highlightActive ? reactionCount + 1 : reactionCount; console.log("element", innerCountElement) } const button1 = document.getElementById("reaction-button-highlight") button1.addEventListener("click", toggleHighlight); } renderButtonReaction(); </script>
This button is used many times for mobile or other things like cards and sidebars.
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" }) %>
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" }) %>
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.
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.
By default button has the md size style, even if you don't explicitly pass a size prop.
<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>
<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>
<%= 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" }) %>
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("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 }) %> <br/> <%= pb_rails("circle_icon_button", props: { icon: "info", variant: "secondary", aria: { label: "Link to Playbook in new window" }, link: "https://playbook.powerapp.cloud/", target: "child" }) %>
<%= pb_rails("circle_icon_button", props: { variant: "primary", icon: "plus", loading: true }) %> <br/> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "pen", loading: true }) %> <br/> <%= pb_rails("circle_icon_button", props: { disabled: true, icon: "times", loading: true }) %> <br/> <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "user", loading: true }) %>
The size prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size.
<%= pb_rails("flex", props: { orientation: "column", gap: "sm" }) do %> <%= pb_rails("circle_icon_button", props: { icon: "plus", size: "sm", variant: "primary" }) %> <%= pb_rails("circle_icon_button", props: { icon: "pen", loading: true, size: "sm", variant: "secondary" }) %> <%= pb_rails("circle_icon_button", props: { disabled: true, icon: "times", size: "sm" }) %> <%= pb_rails("circle_icon_button", props: { icon: "info", link: "https://playbook.powerapp.cloud/", size: "sm", target: "child", variant: "link" }) %> <% end %>
<%= pb_rails("flex", props: { align: "center"}) do %> <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span> <% end %> <%= pb_rails("flex", props: { align: "center" }) do %> <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span> <% end %> <%= pb_rails("flex", props: { align: "center" }) do %> <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span> <% end %> <%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %> <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span> <% end %> <%= pb_rails("flex", props: { align: "center" }) do %> <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span> <% end %> <%= pb_rails("flex", props: { align: "center" }) do %> <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span> <% end %> <%= pb_rails("flex", props: { align: "center" }) do %> <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span> <% end %>
<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %> <%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
Provide an element's ID as the from parameter, and its text will be copied. If the element is an input, its value will be copied; otherwise, the innerText will be used. Additionally, if a value prop is provided, it will override the content from the from element and be copied instead.
<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %> <%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %> <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %> <%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %> <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>
You can use any external control (like the text itself or an icon) to copy. To use this hook, set the data-external-copy-from attribute on the external control to the copying ID. This will grab the innerText from your_id element, or value if it is an input element. Alternatively, you can set a data-external-copy-value attribute and copy custom text.
See the code example for details.
<%= pb_rails("body", props: { cursor: "pointer", data: { "external-copy-from": "hookbody"} }) do %> <span id="hookbody">I'm a custom copy hook! Click this body to copy this text!</span> <% end %> <%= pb_rails("tooltip", props: { trigger_element_selector: "#hookbody", tooltip_id: "hookbody_tooltip", position: 'top', trigger_method: "click" }) do %> Copied! <% end %> <%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Paste here" }) %>
