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