Progress

Progress Bar

Props

  • label - text label
  • progress - percentage value: eg. 75%
<ProgressBar label='Progress' progress='75%' />

Steps

Steps can be used to indicate the current point in a multiple-stage process, such as filling in a long form.


  1. Basket
  2. Checkout
  3. Payment

Props

  • items - array of objects containing, name, url and completed boolean
<ProgressSteps items={[
  { name: 'Basket', url: '/basket', completed: true },
  { name: 'Checkout', url: '/checkout', completed: true },
  { name: 'Payment', url: '/payment', completed: false },
]}/>