Steps

Use the Steps component to display sequential navigation. A step will display an incremental counter and may have a title and description.

Examples

Orientations

The Steps component can be oriented vertically or horizontally.

Finished

In Progress

An optional description to provide more detail about this step.

Waiting

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'
function Example() {
return (
<Steps orientation="vertical">
<Steps.Step status={Steps.statuses.completed}>
Finished
</Steps.Step>
<Steps.Step
description="An optional description to provide more detail about this step."
status={Steps.statuses.current}
>
In Progress
</Steps.Step>
<Steps.Step status={Steps.statuses.incomplete}>
Waiting
</Steps.Step>
</Steps>
)
}
export default Example

Finished

In Progress

An options description to provide more detail about this step.

Waiting

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'
function Example() {
return (
<Steps orientation="horizontal">
<Steps.Step status={Steps.statuses.completed}>
Finished
</Steps.Step>
<Steps.Step
description="An options description to provide more detail about this step."
status={Steps.statuses.current}
>
In Progress
</Steps.Step>
<Steps.Step status={Steps.statuses.incomplete}>
Waiting
</Steps.Step>
</Steps>
)
}
export default Example

Sizes

The size prop will adjust the font and marker dimensions.

Medium

Large

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'
function Example() {
return (
<>
<Steps orientation="horizontal" size="medium">
<Steps.Step status={Steps.statuses.completed}>Medium</Steps.Step>
</Steps>
<Steps orientation="horizontal" size="large">
<Steps.Step status={Steps.statuses.completed}>Large</Steps.Step>
</Steps>
</>
)
}
export default Example

Step status

Use the status prop to defined the status of each step.

Incomplete

Current

Completed

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'
function Example() {
return (
<Steps orientation="horizontal" size="medium">
<Steps.Step status={Steps.statuses.incomplete}>Incomplete</Steps.Step>
<Steps.Step status={Steps.statuses.current}>Current</Steps.Step>
<Steps.Step status={Steps.statuses.completed}>Completed</Steps.Step>
</Steps>
)
}
export default Example

Marker counters

Incremental counters can optionally be hidden using the counter prop.

Finished

In Progress

An optional description to provide more detail about this step.

Waiting

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'
function Example() {
return (
<Steps counter={false} orientation="horizontal" size="medium">
<Steps.Step status={Steps.statuses.completed}>
Finished
</Steps.Step>
<Steps.Step
description="An optional description to provide more detail about this step."
status={Steps.statuses.current}
>
In Progress
</Steps.Step>
<Steps.Step status={Steps.statuses.incomplete}>
Waiting
</Steps.Step>
</Steps>
)
}
export default Example

Interactive

Add an onClick prop to display the step as interactive.

Select type

Select template

An optional description to provide more detail about this step.

Add details

Select goals

Review

import React from 'react'
import Steps from '@pluralsight/ps-design-system-steps'
function Example() {
const { steps, select } = useData()
return (
<Steps orientation="vertical">
{steps.map((step, index) => (
<Steps.Step
key={index}
description={step.status === 'current' && step.description}
onClick={() => select(step)}
status={step.status}
>
{step.title}
</Steps.Step>
))}
</Steps>
)
}
function useData(){
const description = 'An optional description to provide more detail about this step.'
const { statuses } = Steps
const [steps, setSteps] = React.useState([
{ description, title: 'Select type', status: statuses.completed },
{ description, title: 'Select template', status: statuses.current },
{ description, title: 'Add details', status: statuses.incomplete },
{ description, title: 'Select goals', status: statuses.incomplete },
{ description, title: 'Review', status: statuses.incomplete }
])
const select = React.useCallback((nextStep) => {
const curIndex = steps.indexOf(nextStep)
if (curIndex < 0) return
setSteps(prev => prev.map((step, index) => ({
...step,
status: index === curIndex
? 'current'
: index < curIndex ? 'completed' : 'incomplete'
})))
}, [steps])
return { steps, select }
}
export default Example

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-steps
  • Import
    import Badge from '@pluralsight/ps-design-system-steps'

Steps

Name
Type
Description
Default
counterbooleanshow/hide the marker countertrue
orientation
horizontal | vertical
vertical
size
medium | large
large

Steps.Step

Name
Type
Description
Default
descriptionstring
markerMarkercustom marker
renderMarkerContainer(props) => React.ReactNoderender prop for custom marker container(p) => <div {...p} />
status
Required
incomplete | current | completed
step status