Stat Value

This kit was cerated for the main use as a dashboard display for numbers. A large label is an optional part if it needs more clarity.

Default

Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view.

import React from 'react'

import { StatValue } from 'playbook-ui'

const StatValueDefault = (props) => {
  return (
    <>
      <StatValue
          value={1048}
      />
      <br />
      <br />
      <StatValue
          value={10.48}
      />
    </>
  )
}

export default StatValueDefault

Unit Value

import React from 'react'

import { StatValue } from 'playbook-ui'

const StatValueUnit = (props) => {
  return (
    <StatValue
        unit="appt"
        value="5,294"
    />
  )
}

export default StatValueUnit

Things To Avoid

Don’t use this as a replacement for titles on a page.

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