Stat

The Stat component displays a statistic value with an optional icon and a positive or negative change value.

Preview

Usage

import { Stat } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Stat 
        value="1200" 
        label="Total Sales" 
        change='+10%'
        icon="dollar-sign" 
      />
    </div>
  );
}

Props

PropDescriptionRequiredValue

change

positive/negative value indicating change amount

optional

string

className

custom style

required

SCSS or Tailwind

icon

icon name to use

optional

string

label

value label

required

string

value

value

required

integer or string

Notes

  • The Stat component uses the Icon and cn functions from 'components/lib' for handling icons and class names, respectively.

  • The change prop specifies the change value, which can be positive or negative.

  • The className prop allows for custom styling to be applied.

  • The icon prop specifies the name of the icon to be displayed.

  • The label prop is required and provides a description for the value.

  • The value prop is required and represents the numeric or string value to be displayed.

  • The changeUp variable is used to determine if the change value is positive or negative.

Last updated