Color Schemes for Stat
are not implemented in the default theme. You can extend the theme to implement them.
Stat
As the name implies, the `Stat` component is used to display some statistics.
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 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>
Props#
StatLabel
,StatHelpText
,StatNumber
composes Text component.StatArrow
composes Icon component.Stat
andStatGroup
composes Box component.
colorScheme
colorScheme
Description
Type
string
size
size
Type
"md"
Default
"md"
variant
variant
Description
Variants for Stat
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
TODO