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.

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

Usage & Types

  • Version
  • 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.appearancesprimary
disabledbooleanstandard input disable flagfalse
hrefstringurl of resource (renders as anchor)
iconIconIcon component
iconAlign
left | right
horizontal icon placement (from Button.iconAligns)
loadingbooleandisables button and shows spinnerfalse
size
xSmall | small | medium | large
button size (from Button.sizes)medium