Progress Simple

Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.

Default

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleDefault = () => {
  return (
    <div>
      <ProgressSimple percent={45} />
    </div>
  )
}

export default ProgressSimpleDefault

Setting Values

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={68}
      />
      <br />
      <ProgressSimple
          max="10"
          value="2"
      />
    </div>
  )
}

export default ProgressSimpleValue

Within a Flex

When rendering a Progress Simple through within a Flex container, you must pass flex="1" to the kit itself so that it fills the available space

import React from 'react'

import { Flex, ProgressSimple } from 'playbook-ui'

const ProgressSimpleFlex = () => {
  return (
    <Flex>
      <ProgressSimple
          align="left"
          flex="1"
          percent={68}
      />
    </Flex>
  )
}

export default ProgressSimpleFlex

Progress Bar Width

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          percent={40}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleValue

Variants

Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default, positive, negative, and warning, respectively.

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleVariants = () => {
  return (
    <div>
      <ProgressSimple percent={64.5} />

      <br />

      <ProgressSimple
          percent={90}
          variant="positive"
      />

      <br />

      <ProgressSimple
          percent={10}
          variant="negative"
      />

      <br />

      <ProgressSimple
          percent={40}
          variant="warning"
      />
    </div>
  )
}

export default ProgressSimpleVariants

Muted

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleMuted = () => {
  return (
    <div>
      <ProgressSimple
          muted
          percent={68}
      />
    </div>
  )
}

export default ProgressSimpleMuted

Align

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleAlign = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="center"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="right"
          percent={45}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleAlign

Things to Avoid

Do not use as turbolinks bar.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat