Stat

As the name implies, the Stat component is used to display some statistics.

View sourceView theme source@chakra-ui/stat

Import

import {
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  StatGroup,
} from "@chakra-ui/react";

Basic Usage

<Stat> <StatLabel>Collected Fees</StatLabel> <StatNumber>£0.00</StatNumber> <StatHelpText>Feb 12 - Feb 28</StatHelpText> </Stat>

<Stat>
  <StatLabel>Collected Fees</StatLabel>
  <StatNumber>£0.00</StatNumber>
  <StatHelpText>Feb 12 - Feb 28</StatHelpText>
</Stat>

Stat with Indicator

<StatGroup> <Stat> <StatLabel>Sent</StatLabel> <StatNumber>345,670</StatNumber> <StatHelpText> <StatArrow type="increase" /> 23.36% </StatHelpText> </Stat> <Stat> <StatLabel>Clicked</StatLabel> <StatNumber>45</StatNumber> <StatHelpText> <StatArrow type="decrease" /> 9.05% </StatHelpText> </Stat> </StatGroup>

<StatGroup>
  <Stat>
    <StatLabel>Sent</StatLabel>
    <StatNumber>345,670</StatNumber>
    <StatHelpText>
      <StatArrow type="increase" />
      23.36%
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Clicked</StatLabel>
    <StatNumber>45</StatNumber>
    <StatHelpText>
      <StatArrow type="decrease" />
      9.05%
    </StatHelpText>
  </Stat>
</StatGroup>

Props

• StatLabel, StatHelpText, StatNumber composes Text component.
• StatArrow composes Icon component.
• Stat and StatGroup composes Box component.

colorScheme

Description

Color Schemes for Stat are not implemented in the default theme. You can extend the theme to implement them.

Type

string

size

Type

"md"

Default

"md"

variant

Description

Variants for Stat are not implemented in the default theme. You can extend the theme to implement them.

Type

string