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 = (props) => (
  <div>
    <Button
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Primary'
        {...props}
    />{" "}
    <Button
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Secondary'
        variant='secondary'
        {...props}
    />{" "}
    <Button
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Link'
        variant='link'
        {...props}
    />
    <Button
        disabled
        marginRight='lg'
        onClick={() => alert("button clicked!")}
        tabIndex={0}
        text='Button Disabled'
        {...props}
    />
  </div>
)

export default ButtonDefault

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 = (props) => (
  <div>
    <Button
        fullWidth
        tabIndex={0}
        text="Button Full Width"
        {...props}
    />
  </div>
)

export default ButtonFullWidth

Button Links

Code Example

Close

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

const ButtonLink = (props) => (
  <div>
    <Button
        aria={{ label: 'Link to Google' }}
        link="https://google.com"
        marginRight='lg'
        tabIndex={0}
        text="A Tag Button"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Link to Google in new window' }}
        link="https://google.com"
        marginRight='lg'
        newWindow
        tabIndex={0}
        text="Open in New Window"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Disabled link to Google' }}
        disabled
        link="https://google.com"
        marginRight='lg'
        tabIndex={0}
        text="A Tag Button Disabled"
        {...props}
    />
  </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 = (props) => (
  <div>
    <Button
        aria={{ label: 'Loading' }}
        loading
        marginRight='lg'
        
        text="Button Primary"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Loading' }}
        loading
        marginRight='lg'
        tabIndex={0}
        text="Button Secondary"
        variant="secondary"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Loading' }}
        loading
        marginRight='lg'
        tabIndex={0}
        text="A Tag Button Disabled"
        variant="link"
        {...props}
    />
  </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.

Code Example

Close

import React from "react";
import { Button, Pill } from "../../";

const ButtonBlockContent = (props) => (
  <div>
    <Button fixedWidth 
        {...props}
        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.

Code Example

Close

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

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

Button Accessibility Options

Code Example

Close

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

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

export default ButtonAccessibility

Button Additional Options (onClick)

Code Example

Close

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

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

export default ButtonOptions

Button Size

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

Code Example

Close

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

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

export default ButtonSize

Button Form Attribute

Code Example

Close

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

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

export default ButtonForm

Button

See this kit in action in our sample UI

Things to Avoid

UI Samples using Button Kit

Conference Statistics

Crm Client List

Trending Repositories

Crowdsourced Posts