Stat Change

Displays the increase, decrease, or neutral change in data. Use when you want the user to see changes in statistical data. User understanding is increased when paired with label or textual context (i.e. Dashboard Value).

Summary

Uses Icons

Default

import React from 'react'
import { StatChange } from 'playbook-ui'

const StatChangeDefault = (props) => {
  return (
    <div>
      <StatChange
          change="increase"
          value="28.4"
      />

      <br />

      <StatChange
          change="decrease"
          value={6.1}
      />

      <br />

      <StatChange
          change="neutral"
          value={102}
      />
    </div>
  )
}

export default StatChangeDefault

Icon

import React from 'react'
import { StatChange } from 'playbook-ui'

const StatChangeUnit = (props) => {
  return (
    <div>
      <StatChange
          icon="chart-line"
          value="28.4"
      />

      <br />

      <StatChange
          icon="chart-line-down"
          value={6.1}
      />

      <br />

      <StatChange
          value={102}
      />
    </div>
  )
}

export default StatChangeUnit

Colors

Increase colors your icon GREEN & Decrease colors your icon RED.

import React from 'react'
import { StatChange } from 'playbook-ui'

const StatChangeUnitTwo = (props) => {
  return (
    <div>
      <StatChange
          change="increase"
          icon="level-up"
          value="28.4"
      />

      <br />

      <StatChange
          change="decrease"
          icon="level-down"
          value={6.1}
      />

      <br />

      <StatChange
          change="neutral"
          value={102}
      />
    </div>
  )
}

export default StatChangeUnitTwo

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