# Stat

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

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FVQ7Lj5gnj5SXCtVhBagw%2Fstat.png?alt=media&#x26;token=0f1e036e-e8b2-4cb1-91c4-120ff727d1a2" alt="Gravity stat component" width="292"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Stat } from 'components/lib';

function MyComponent({ ...props }){

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

## Props

| Prop      | Description                                                                 | Required | Value             |
| --------- | --------------------------------------------------------------------------- | -------- | ----------------- |
| change    | positive/negative value indicating change amount                            | optional | string            |
| className | custom style                                                                | required | SCSS or Tailwind  |
| icon      | [icon](https://docs.usegravity.app/gravity-web/components/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.