Stat - rafty/ui Docs

Stat component is used to display statistics/numbers.

This is a custom component made according to our styling conventions limiting the props available

Anatomy

Import all parts and piece them together.

import { Stat, StatHelpText, StatIcon, StatLabel, StatValue } from "@rafty/ui";

<Stat>
  <StatLabel />
  <StatValue />
  <StatHelpText>
    <StatIcon />
  </StatHelpText>
</Stat>;

Usage

Daily Return

17,770.90

0.47%

<Stat type="decrease">
  <StatLabel>
    Daily Return
  </StatLabel>
  <StatValue>
    17,770.90
  </StatValue>
  <StatHelpText>
    <StatIcon />
    {' '}0.47%
  </StatHelpText>
</Stat>

Type

The type prop is used to define type of stat, it has 3 options: increase, decrease & normal (default).

Daily Return

17,770.90

0.47%

<Stat type="increase">
  <StatLabel>
    Daily Return
  </StatLabel>
  <StatValue>
    17,770.90
  </StatValue>
  <StatHelpText>
    <StatIcon />
    {' '}0.47%
  </StatHelpText>
</Stat>