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. Danger buttons are used to indicate destructive actions such as deleting.

import React from "react"

import { Button } from 'playbook-ui'

const ButtonDefault = (props) => (
  <div>
    <Button
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Primary'
    />{" "}
    <Button
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Secondary'
        variant='secondary'
    />{" "}
    <Button
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Link'
        variant='link'
    />
    <Button
        disabled
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Disabled'
    />
    <Button
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Danger'
        variant='danger'
    />
  </div>
)

export default ButtonDefault

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!

import React, {useState} from "react"

import { Button } from 'playbook-ui'

const ButtonReaction = (props) => {

const [highlightActive, setHighlightActive] =useState(false)
const reactionCount = 153

return (
  <div>
    <Button
        count={highlightActive ? (reactionCount + 1) : reactionCount}
        highlight = {highlightActive}
        icon="&#127881;"
        onClick={()=> setHighlightActive(!highlightActive)}
        tabIndex={0}
        variant="reaction"
    />
    <Button
        count={5}
        icon="1️⃣"
        marginLeft='lg'
        tabIndex={0}
        variant="reaction"
    />
    <Button
        marginLeft='lg'
        tabIndex={0}
        variant="reaction"
    />
    <Button
        icon="user"
        marginLeft='lg'
        tabIndex={0}
        variant="reaction"
    />

    </div>
)
}

export default ButtonReaction

Button Full Width

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

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonFullWidth = (props) => (
  <div>
    <Button
        fullWidth
        tabIndex={0}
        text="Button Full Width"
    />
  </div>
)

export default ButtonFullWidth

Button Links

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.

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonLink = (props) => (
  <>
    <Button
        aria={{ label: 'Link to Google' }}
        link="https://google.com"
        marginRight='lg'
        tabIndex={0}
        text="A Tag Button"
    />
    {' '}
    <Button
        aria={{ label: 'Link to Google in new window' }}
        link="https://google.com"
        marginRight='lg'
        newWindow
        tabIndex={0}
        text="Open in New Window"
    />
    {' '}
    <Button
        aria={{ label: 'Link to Playbook in new window' }}
        link="https://playbook.powerapp.cloud/"
        marginRight='lg'
        tabIndex={0}
        target='child'
        text="Open in a Child Tab"
    />
    {' '}
    <Button
        aria={{ label: 'Disabled link to Google' }}
        disabled
        link="https://google.com"
        marginRight='lg'
        tabIndex={0}
        text="A Tag Button Disabled"
    />
  </>
)

export default ButtonLink

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.

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonLoading = (props) => (
  <div>
    <Button
        aria={{ label: 'Loading' }}
        loading
        marginRight='lg'
        
        text="Button Primary"
    />
    {' '}
    <Button
        aria={{ label: 'Loading' }}
        loading
        marginRight='lg'
        tabIndex={0}
        text="Button Secondary"
        variant="secondary"
    />
    {' '}
    <Button
        aria={{ label: 'Loading' }}
        loading
        marginRight='lg'
        tabIndex={0}
        text="A Tag Button Disabled"
        variant="link"
    />
  </div>
)

export default ButtonLoading

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.

import React from "react";

import { Button, Pill } from 'playbook-ui'

const ButtonBlockContent = (props) => (
  <div>
    <Button fixedWidth
        tabIndex={0}
    >
      <Pill marginRight="xs"
          text="5"
          variant="info"
      />
      <span>Button with Block Content</span>
    </Button>
  </div>
);

export default ButtonBlockContent;

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.

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonIconOptions = (props) => (
    <div>
      <Button
          fixedWidth
          icon='plus'
          marginRight='lg'
          tabIndex={0}
          text="Icon on Left"
      />
      {' '}
      <Button
          fixedWidth
          icon='chevron-right'
          iconRight
          marginRight='lg'
          tabIndex={0}
          text="Icon on Right"
      />
    </div>
  )
  
  export default ButtonIconOptions

Button Accessibility Options

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonAccessibility = (props) => (
  <div>
    <Button
        aria={{ label: 'Go to Google' }}
        link="https://google.com"
        tabIndex={0}
        tag="a"
        text="Button with ARIA"
    />
  </div>
)

export default ButtonAccessibility

Button Additional Options (onClick)

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonOptions = (props) => (
  <div>
    <Button
        htmlType="submit"
        onClick={() => alert('Click!')}
        tabIndex={0}
        text="Button with options"
        value="1234"
    />
  </div>
)

export default ButtonOptions

Button Size

By default button has the md size style, even if you don't explicitly pass a size prop.

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonSize = (props) => (
  <div>
    <Button
        marginRight='lg'
        size="sm"
        tabIndex={0}
        text="Button sm size"
    />
    {' '}
    <Button
        marginRight='lg'
        size="md"
        tabIndex={0}
        text="Button md size"
    />
    {' '}
    <Button
        marginRight='lg'
        size="lg"
        tabIndex={0}
        text="Button lg size"
    />
  </div>
)

export default ButtonSize

Button Form Attribute

import React from 'react'

import { Button } from 'playbook-ui'

const ButtonForm = (props) => (
  <div>
    <Button
        form="form-id"
        tabIndex={0}
        text="Button with Form Attribute"
    />
  </div>
)

export default ButtonForm

Button Hover

import React from "react"

import { Button } from 'playbook-ui'

const ButtonHover = (props) => (
  <div>
    <div>
      <Button
          hover={{ shadow: "deep" }}
          marginRight='lg'
          marginTop='xl'
          onClick={() => alert("button clicked!")}
          tabIndex={0}
          text='Shadow Deep'
      />{" "}
      <Button
          hover={{ shadow: "deeper" }}
          marginRight='lg'
          marginTop='xl'
          onClick={() => alert("button clicked!")}
          tabIndex={0}
          text='Shadow Deeper'
          variant='secondary'
      />{" "}
      <Button
          hover={{ shadow: "deepest" }}
          marginRight='lg'
          marginTop='xl'
          onClick={() => alert("button clicked!")}
          tabIndex={0}
          text='Shadow Deepest'
          variant='link'
      />
    </div>
  </div>
)

export default ButtonHover

Button Toolbar

Default

import React from 'react'

import { Button, ButtonToolbar } from 'playbook-ui'

const ButtonToolbarDefault = (props) => (
  <div className="pb--doc-demo-row">
    <ButtonToolbar
        orientation="vertical"
    >
      <Button
          text="Create"
      />
      <Button
          text="Edit"
      />
      <Button
          text="Copy"
      />
      <Button
          text="Cut"
      />
    </ButtonToolbar>

    <ButtonToolbar
        orientation="horizontal"
    >
      <Button
          text="Create"
      />
      <Button
          text="Edit"
      />
      <Button
          text="Copy"
      />
      <Button
          text="Cut"
      />
    </ButtonToolbar>
  </div>
)

export default ButtonToolbarDefault

Secondary

import React from 'react'

import { default as Button, default as ButtonToolbar } from 'playbook-ui'

const ButtonToolbarSecondary = (props) => (
  <div className="pb--doc-demo-row">
    <ButtonToolbar
        orientation="vertical"
        variant="secondary"
    >
      <Button
          text="Create"
          variant="secondary"
      />
      <Button
          text="Edit"
          variant="secondary"
      />
      <Button
          text="Copy"
          variant="secondary"
      />
      <Button
          text="Cut"
          variant="secondary"
      />
    </ButtonToolbar>

    <ButtonToolbar
        orientation="horizontal"
        variant="secondary"
    >
      <Button
          text="Create"
          variant="secondary"
      />
      <Button
          text="Edit"
          variant="secondary"
      />
      <Button
          text="Copy"
          variant="secondary"
      />
      <Button
          text="Cut"
          variant="secondary"
      />
    </ButtonToolbar>
  </div>
)

export default ButtonToolbarSecondary

Circle Icon Button

Default

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonDefault = (props) => (
  <div>
    <CircleIconButton
        icon="plus"
        variant="primary"
    />

    <br />

    <CircleIconButton
        icon="pen"
        variant="secondary"
    />

    <br />

    <CircleIconButton
        disabled
        icon="times"
    />

    <br />

    <CircleIconButton
        icon="user"
        variant="link"
    />
  </div>
)

export default CircleIconButtonDefault

Click Handler

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonClick = (props) => (
  <div>
    <CircleIconButton
        icon="plus"
        onClick={() => alert('Click!')}
        variant="primary"
    />
  </div>
)

export default CircleIconButtonClick

Link

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonLink = (props) => (
  <div>
    <CircleIconButton
        icon="search"
        link="https://google.com"
        variant="primary"
    />

    <br />

    <CircleIconButton
        icon="window"
        link="https://google.com"
        newWindow
        variant="secondary"
    />

    <br/>

    <CircleIconButton
        aria={{ label: "Link to Playbook in new window" }}
        icon="info"
        link="https://playbook.powerapp.cloud/"
        target="child"
        variant="secondary"
    />
  </div>
)

export default CircleIconButtonLink

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonLoading = (props) => (
  <div>
    <CircleIconButton
        icon="plus"
        loading
        variant="primary"
    />

    <br />

    <CircleIconButton
        icon="pen"
        loading
        variant="secondary"
    />

    <br />

    <CircleIconButton
        disabled
        icon="times"
        loading
    />

    <br />

    <CircleIconButton
        icon="user"
        loading
        variant="link"
    />
  </div>
)

export default CircleIconButtonLoading

Size

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.

import React from 'react'

import { CircleIconButton, Flex } from 'playbook-ui'

const CircleIconButtonSize = (props) => (
  <>
    <Flex gap="sm"
        orientation="column"
    >
        <CircleIconButton
            icon="plus"
            size="sm"
            variant="primary"
        />
        <CircleIconButton
            icon="pen"
            loading
            size="sm"
            variant="secondary"
        />
        <CircleIconButton
            disabled
            icon="times"
            size="sm"
        />
        <CircleIconButton
            icon="info"
            link="https://playbook.powerapp.cloud/"
            size="sm"
            target="child"
            variant="link"
        />
    </Flex>
  </>
)

export default CircleIconButtonSize

Icon Button

Default

import React from 'react'

import { IconButton } from 'playbook-ui'

const IconButtonDefault = (props) => (
  <div>
    <IconButton
    />
    <IconButton
        marginTop="md"
        variant="link"
    />
  </div>
)

export default IconButtonDefault

Sizes

import React from 'react'

import { IconButton, Flex } from 'playbook-ui'

const IconButtonSizes = (props) => (
  <div>
    <Flex align="center">
      <IconButton
          size="lg"
      />
      <span>Large</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="sm"
      />
      <span>Small</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="xs"
      />
      <span>XSmall</span>
    </Flex>
    <Flex
        align="center"
        marginTop="md"
    >
      <IconButton
          size="1x"
      />
      <span>1x</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="2x"
      />
      <span>2x</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="3x"
      />
      <span>3x</span>
    </Flex>
    <Flex align="center">
      <IconButton
          size="4x"
      />
      <span>4x</span>
    </Flex>
  </div>
)

export default IconButtonSizes

Click Handler

import React from 'react'

import { IconButton } from 'playbook-ui'

const IconButtonClick = (props) => (
  <div>
    <IconButton
        onClick={() => alert('Click!')}
    />
  </div>
)

export default IconButtonClick

Copy Button

Default

import React from 'react'

import { CopyButton, Textarea } from 'playbook-ui'

const CopyButtonDefault = (props) => (
  <div>
    <CopyButton
        text="Copy Text"
        tooltipPlacement="right"
        tooltipText="Text copied!"
        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."
    />

    <Textarea
        placeholder="Copy and paste here"
    />
  </div>
)

export default CopyButtonDefault

Copy From

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.

import React, { useState } from 'react'

import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'

const CopyButtonFrom = (props) => {
  const [text, setText] = useState("Copy this text input text")

  const handleChange = (event) => {
    setText(event.target.value);
  }

  return (<div>
    <Body id="body">Copy this body text!</Body>
    <CopyButton
        from="body"
        marginBottom="sm"
        text="Copy Body text"
        tooltipPlacement="right"
        tooltipText="Body text copied!"
    />

    <TextInput
        id="textinput"
        onChange={handleChange}
        value={text}
    />
    <CopyButton
        from="textinput"
        marginBottom="sm"
        text="Copy Text Input"
        tooltipPlacement="right"
        tooltipText="Text input copied!"
    />

    <Textarea
        placeholder="Copy and paste here"
    />
  </div>
  )
}

export default CopyButtonFrom

Copy Hook

We provide a usePBCopy hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.

usePBCopy({ from: 'your_id' }) will grab the innerText from your_id element, or value if it is an input element.

import React, { useEffect, useState } from 'react'

import { usePBCopy, Body, Textarea, Tooltip } from 'playbook-ui'

const CopyButtonHook = ({...props}) => {
  // This is how you can use the copy button hook to copy text to the clipboard
  // eslint-disable-next-line no-unused-vars
  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
  // I added a tooltip so it looks better in the ui
  const [showTooltip, setShowTooltip] = useState(false)

  const handleCopy = () => {
    copyToClipboard()
    setShowTooltip(true)
    setTimeout(() => setShowTooltip(false), 1500)
  }

  useEffect(() => {
    const el = document.getElementById('hookbody')
    if (!el) return

    el.addEventListener('click', handleCopy)
    return () => {
      el.removeEventListener('click', handleCopy)
    }
  }, [copyToClipboard])

  return (
    <div>
      <Tooltip
          delay={{ close: 1000 }}
          forceOpenTooltip={showTooltip}
          placement="top"
          showTooltip={false}
          text="Copied!"
      >
        <Body
            cursor="pointer"
            id="hookbody"
            text="I'm a custom copy hook! Click this body to copy this text!"
        />
      </Tooltip>

      <Textarea
          placeholder="Paste here"
      />
    </div>
  )
}

export default CopyButtonHook

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

Dribbble

Github

Connect Chat