Playbook Design System

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.

Code Example

Close

import React from 'react'
import { Button } from '../../'

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

)

export default ButtonDefault

Button Variants Dark

Code Example

Close

import React from 'react'
import { Button } from '../../'

const ButtonDefaultDark = () => (
  <div>
    <Button
        dark
        text="Button Primary"
    />
    <Button
        dark
        text="Button Secondary"
        variant="secondary"
    />
    <Button
        dark
        text="Button Link"
        variant="link"
    />
    <Button
        dark
        disabled
        text="Button Disabled"
    />
  </div>
)

export default ButtonDefaultDark

Button Full Width

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

Code Example

Close

import React from 'react'
import { Button } from '../../'

const ButtonFullWidth = () => (
  <div>
    <Button
        fullWidth
        text="Button Full Width"
    />
  </div>
)

export default ButtonFullWidth

Button Links

Code Example

Close

import React from 'react'
import { Button } from '../../'

const ButtonLink = () => (
  <div>
    <Button
        link="https://google.com"
        text="A Tag Button"
    />
    <Button
        link="https://google.com"
        newWindow
        text="Open in New Window"
    />
    <Button
        disabled
        link="https://google.com"
        text="A Tag Button Disabled"
    />
  </div>
)

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.

Code Example

Close

import React from 'react'
import { Button } from '../../'

const ButtonLoading = () => (
  <div>
    <Button
        loading
        text="Button Primary"
    />
    <Button
        loading
        text="Button Secondary"
        variant="secondary"
    />
    <Button
        loading
        text="A Tag Button Disabled"
        variant="link"
    />
  </div>
)

export default ButtonLoading

Button Block Content

Code Example

Close

import React from 'react'
import { Button } from '../../'

const ButtonBlockContent = () => (
  <div>
    <Button
        fixedWidth
        icon="users"
        text="Button with Block Content"
    />
  </div>
)

export default ButtonBlockContent

Button Accessibility Options

Code Example

Close

import React from 'react'
import { Button } from '../../'

const ButtonAccessibility = () => (
  <div>
    <Button
        aria={{ label: 'button' }}
        link="https://google.com"
        tag="a"
        text="Button with ARIA"
    />
  </div>
)

export default ButtonAccessibility

Button Additional Options (onClick)

Code Example

Close

import React from 'react'
import Button from '../_button.jsx'

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

export default ButtonOptions

5.2.0

Button

Things to Avoid