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><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
andStatGroup
composes Box component.
colorScheme
colorScheme
Description
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
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
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web