Dashboard Value

Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use Currency Kit.

Full Example

import React from 'react'

import DashboardValue from 'playbook-ui'

const DashboardValueDefault = (props) => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Decreased Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ change: 'increase', value: 56.1 }}
          statLabel="Increased Value"
          statValue={{ value: '938', unit: 'homes' }}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ value: 86 }}
          statLabel="Neutral Value"
          statValue={{ value: '261', unit: 'windows' }}
      />

      <br />
      <br />

      <DashboardValue
          statLabel="Pitch Rate"
          statValue={{ value: '90.9', unit: '%' }}
      />
    </div>
  )
}

export default DashboardValueDefault

Align

import React from 'react'

import DashboardValue from 'playbook-ui'

const DashboardValueAlign = (props) => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          align="center"
          statChange={{ change: 'decrease', value: 56.1 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          align="right"
          statChange={{ change: 'decrease', value: 86 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />
    </div>
  )
}

export default DashboardValueAlign

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