Button

Used to call attention, perform an action, or to navigate.

Install
npm install @pluralsight/ps-design-system-button
Import
import Button from '@pluralsight/ps-design-system-button'

Examples

Appearance

Buttons come in four standard visual styles.

import Button from '@pluralsight/ps-design-system-button'
import React from 'react'

function Example() {
  return (
    <div className="example-grid">
      <Button appearance={Button.appearances.primary}>Primary</Button>
      <Button appearance={Button.appearances.secondary}>Secondary</Button>
      <Button appearance={Button.appearances.stroke}>Stroke</Button>
      <Button appearance={Button.appearances.flat}>Flat</Button>
    </div>
  )
}

export default Example

Size

Buttons come in four standard sizes. The default size is medium.

import Button from '@pluralsight/ps-design-system-button'
import React from 'react'

function Example() {
  return (
    <div className="example-grid">
      <Button size={Button.sizes.large}>Large</Button>
      <Button size={Button.sizes.medium}>Medium</Button>
      <Button size={Button.sizes.small}>Small</Button>
      <Button size={Button.sizes.xSmall}>XSmall</Button>
    </div>
  )
}

export default Example

Icon

Buttons may include an icon to the left or right of the label. Read more icon docs.

import Button from '@pluralsight/ps-design-system-button'
import { CheckIcon, ChannelIcon, PlayIcon } from '@pluralsight/ps-design-system-icon'
import React from 'react'

function Example() {
  return (
    <div className="example-grid">
      <Button icon={<CheckIcon />}>With Icon</Button>
      <Button icon={<ChannelIcon />} appearance={Button.appearances.stroke}>
        With Icon
      </Button>
      <Button
        icon={<PlayIcon />}
        iconAlign={Button.iconAligns.right}
        appearance={Button.appearances.flat}
      >
        Aligned to Right
      </Button>
    </div>
  )
}

export default Example

Icon only

Buttons may include an icon without a label. Please provide a title prop to display the native tooltip as well as to support assistive technology (i.e. screen readers).

import Button from '@pluralsight/ps-design-system-button'
import { UserIcon } from '@pluralsight/ps-design-system-icon'
import React from 'react'

function Example() {
  return (
    <div className="example-grid">
      <Button icon={<UserIcon />} title="Profile" />
      <Button
        icon={<UserIcon />}
        appearance={Button.appearances.flat}
        title="Profile"
      />
    </div>
  )
}

export default Example

Disabled prop

Each button may be displayed as disabled. Do not use disabled treatment for non-disabled buttons.

import Button from '@pluralsight/ps-design-system-button'
import { UserIcon } from '@pluralsight/ps-design-system-icon'
import React from 'react'

function Example() {
  return (
    <div className="example-grid">
      <Button disabled>Disabled</Button>
      <Button disabled appearance={Button.appearances.stroke}>
        Disabled
      </Button>
      <Button disabled appearance={Button.appearances.flat}>
        Disabled
      </Button>
      <Button disabled icon={<PencilIcon />}>
        Disabled
      </Button>
    </div>
  )
}

export default Example

Elements that are visually equivalent to buttons but change the URL and link to a new experience should be rendered as HTML anchor tags. Provide an href prop, and the button will render as an anchor tag.

Link

Link with icon

import Button from '@pluralsight/ps-design-system-button'
import { UserIcon } from '@pluralsight/ps-design-system-icon'
import React from 'react'

function Example() {
  return (
    <div className="example-grid">
      <Button href="https://duckduckgo.com?q=pluralsight" target="_blank">
        Link
      </Button>
      <Button
        href="https://duckduckgo.com?q=pluralsight%20icons"
        target="_blank"
        icon={<PencilIcon />}
      >
        Link with icon
      </Button>
    </div>
  )
}

export default Example

With react-router

Many users of this component are using it in conjunction with react-router . If you'd like to do the same and use Button to trigger react-router links, you can follow this pattern.

import Button from '@pluralsight/ps-design-system-button'
import React from 'react'
import { BrowserRouter as Router, withRouter } from 'react-router-dom'

function Example() {
  // #1 Define your react-router-specific ButtonLink
  const ButtonLink = withRouter(props => (
    <Button
      {...props}
      onClick={evt => {
        evt.preventDefault()
        props.onClick && props.onClick(evt)
        props.history.push(props.to)
      }}
      href={props.to}
    />
  ))

  // #2 Invoke it like you'd usually use Link
  return (
    <Router>
      <ButtonLink to="/react-wonderland">
        React-router Link as DS button
      </ButtonLink>
    </Router>
  )
}

export default Example

Loading prop

To show a spinner, pass a loading flag to your button. When loading is passed dynamically, it replaces your icon when it toggles to true. If no icon is present, it replaces your text.

import Button from '@pluralsight/ps-design-system-button'
import { UserIcon } from '@pluralsight/ps-design-system-icon'
import React from 'react'

function Example() {
  return (
    <Button icon={<UserIcon />} loading>
      Loading...
    </Button>
  )
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Button, Link

Props

Name	Type	Description	Default
`appearance` Required	`primary \| secondary \| stroke \| flat`	visual style from Button.appearances	`primary`
`disabled`	`boolean`	standard input disable flag	`false`
`href`	`string`	url of resource (renders as anchor)
`icon`	`Icon`	Icon component
`iconAlign`	`left \| right`	horizontal icon placement (from Button.iconAligns)
`loading`	`boolean`	disables button and shows spinner	`false`
`size`	`xSmall \| small \| medium \| large`	button size (from Button.sizes)	`medium`