Button

Summary

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. 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" }) %>

Reaction Button

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: "&#127881;", 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>

Button Full Width

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

Responsive `display` and `full_width`

full_width applies block styling that includes display: flex on the same element as the button. The display global prop also sets display (via utility classes, often with !important).

Putting both on one button means two systems control display on one node, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.

Recommended: Put responsive display on a parent (e.g. Flex, Card, or a plain wrapper) and keep full_width only on the Button inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.

<%= pb_rails("flex", props: {
  display: { xs: "flex", default: "none" },
  orientation: "column",
  width: "100%",
}) do %>
  <%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
<% end %>

<%= 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

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

Button variants with loading

Button sizes with 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.

NOTE: In Rails, both the button text and loading spinner are rendered at the same time, and visibility is toggled between them. Even though the text prop is not required, providing it ensures the button maintains its correct shape during loading.

<%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, text: "Loading", margin_right: "lg" }) %>
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, text: "Loading", margin_right: "lg" }) %>
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, text: "Loading", margin_right: "lg" }) %>
<%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", text: "Loading", margin_right: "lg" }) %>
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", text: "Loading", 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 Toggle Disabled State

Click to disable the Buttons below

Click to enable the Buttons below

I am an <a> Button

If needing to toggle the disabled state of the Button dynamically (for example, within a Turbo or Stimulus context), you can now do so in rails using the pb-button-managed data attribute.

1) Add the following data attribute to your button kit: data:{ pb-button-managed: true }

2) To toggle enabled/disabled state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.

Click to enable or disable the buttons above and view the code snippet below for details!

  <%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
  <%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>

<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com"}) %>
<% end %>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const disableTrigger = document.querySelector('#toggle-disabled-demo')
    const enableTrigger = document.querySelector('#toggle-enabled-demo')

    // Find the Buttons you want to 'manage'
    const btn = document.querySelector('#normal_managed_button');
    const link = document.querySelector('#a_tag_managed_button');

    disableTrigger.addEventListener('click', (e) => {
        // Disable default button
        btn.setAttribute('disabled', true)
        // Disable a tag button
        link.setAttribute('aria-disabled', 'true')
    });

    enableTrigger.addEventListener('click', (e) => {
        // Enable default button
        btn.removeAttribute('disabled')
        // Enable a tag button
        link.removeAttribute('aria-disabled')
    });
  });
</script>

Button Toggle Disabled State Helper

Click to disable the Button below

Click to enable the Button below

The disabled state for the button can also be toggled via small helpers available through the pb-button-managed data attribute.

1) Add the following data attribute to your button kit: data:{ pb-button-managed: true }

2) Toggle state via the provided _pbButton.disable() and _pbButton.enable() helpers as shown in the code snippet below.

Click to enable or disable the buttons above to see this in action!

  <%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
  <%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
<br/>
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
<% end %>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
    const enable = document.querySelector('#toggle-enabled-demo-with-helper')

    // Find the Button you want to 'manage'
    const demoBtn = document.querySelector('#managed_button_with_helper')

    // Use the pbButton object created by the kit to call the enable/disable methods
    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});

  });
</script>

Icon Button Variant

Small Size (sm)

Medium Size (md)

Large Size (lg)

The icon button variant automatically renders when you provide an icon prop without a corresponding text prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use <%= pb_rails("button", props: { icon: "plus", variant: "secondary" }) %> to get an icon button.

<%= pb_rails("caption", props: { margin_y: "md", text: "Small Size (sm)" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "sm", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "secondary", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "link", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "danger", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "sm", disabled: true, margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "sm", loading: true, margin_right: "lg" }) %>
<%= pb_rails("caption", props: { margin_y: "md", text: "Medium Size (md)" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "md", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "secondary", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "link", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "danger", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "md", disabled: true, margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "md", loading: true, margin_right: "lg" }) %>
<%= pb_rails("caption", props: { margin_y: "md", text: "Large Size (lg)" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "lg", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "secondary", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "link", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "danger", margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "lg", disabled: true, margin_right: "lg" }) %>
<%= pb_rails("button", props: { icon: "plus", size: "lg", loading: true, margin_right: "lg" }) %>

Things to Avoid

Never use more than one primary button on a page at any given time.

Available Props

Props	Type	Values
align_content	enum \| responsive	start end center spaceBetween spaceAround spaceEvenly
align_items	enum \| responsive	start end center
border_radius	enum	none xs sm md lg xl rounded
cursor	enum	auto default none contextMenu help pointer progress wait cell
dark	boolean	true false
flex	enum \| responsive	auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none
flex_direction	enum \| responsive	row column rowReverse columnReverse
flex_wrap	enum \| responsive	wrap nowrap wrapReverse
justify_content	enum \| responsive	start end center spaceBetween spaceAround spaceEvenly
line_height	enum	loosest looser loose normal tight tighter tightest
margin_right	array	none xxs xs sm md lg xl
margin_left	array	none xxs xs sm md lg xl
margin_top	array	none xxs xs sm md lg xl
margin_bottom	array	none xxs xs sm md lg xl
margin_x	array	none xxs xs sm md lg xl
margin_y	array	none xxs xs sm md lg xl
margin	array	none xxs xs sm md lg xl
width	string
min_width	string
max_width	string
gap	string \| responsive
column_gap	string \| responsive
row_gap	string \| responsive
number_spacing	enum	tabular
order	enum \| responsive	none first 1 2 3 4 5 6 7 8 9 10 11 12
overflow_x	enum	scroll visible hidden auto
overflow_y	enum	scroll visible hidden auto
overflow	enum	scroll visible hidden auto
padding_right	array	none xxs xs sm md lg xl
padding_left	array	none xxs xs sm md lg xl
padding_top	array	none xxs xs sm md lg xl
padding_bottom	array	none xxs xs sm md lg xl
padding_x	array	none xxs xs sm md lg xl
padding_y	array	none xxs xs sm md lg xl
padding	array	none xxs xs sm md lg xl
position	enum	relative absolute fixed sticky static
shadow	enum	none deep deeper deepest
text_align	enum \| responsive	start end left right center justify justifyAll matchParent
truncate	enum	none 1 2 3 4 5
vertical_align	enum \| responsive	baseline super top middle bottom sub text-top text-bottom
z_index	enum \| responsive	1 2 3 4 5 6 7 8 9 10 max
top	enum \| object	xxs xs sm md lg xl xxl
inset	boolean	true false
right	enum \| object	xxs xs sm md lg xl xxl
bottom	enum \| object	xxs xs sm md lg xl xxl
left	enum \| object	xxs xs sm md lg xl xxl
height	string
max_height	string
min_height	string
hover	object
group_hover	boolean	true false

Props	Type	Values	Default
count	number
disabled	boolean	true false	false
fixed_width	boolean	true false
form	string
full_width	boolean	true false	false
highlight	boolean	true false	false
icon	string
icon_right	boolean	true false	false
link	string
loading	boolean	true false	false
new_window	boolean	true false	false
on_click	function
tab_index	number
size	enum	sm md lg
target	string
text	string
type	enum	inline	inline
html_type	enum	submit reset button
value	string \| null
variant	enum	primary secondary link danger reaction	primary
wrapper_class	string
icon_font_family	enum	far fas fab fak	far

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat

Button

Responsive display and full_width

Things to Avoid

Available Props

align_content

align_items

border_radius

cursor

dark

flex

flex_direction

flex_wrap

justify_content

line_height

margin_right

margin_left

margin_top

margin_bottom

margin_x

margin_y

margin

width

min_width

max_width

gap

column_gap

row_gap

number_spacing

order

overflow_x

overflow_y

overflow

padding_right

padding_left

padding_top

padding_bottom

padding_x

padding_y

padding

position

shadow

text_align

truncate

vertical_align

z_index

top

inset

right

bottom

left

height

max_height

min_height

hover

group_hover

count

disabled

fixed_width

form

full_width

highlight

icon

icon_right

link

loading

new_window

on_click

tab_index

size

target

text

type

html_type

value

variant

wrapper_class

icon_font_family

Contribute to Playbook

Power

Connect

Responsive `display` and `full_width`