Button

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

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. By default, it replaces your icon. 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

Usage & Types

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

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`