Stat
Stat is used to display numbers or data within a box.
Import
import {Stat,StatLabel,StatNumber,StatHelperMessage,StatIcon,} from "@yamada-ui/react"
Stat: A wrapper component to control numbers or data.StatLabel: A component to display the label for numbers or data.StatNumber: A component to display numbers or data.StatHelperMessage: A component to display supplementary information for numbers or data.StatIcon: A component for icons that indicate the status of numbers or data.
StatLabel, StatNumber, StatHelperMessage, and StatIcon can be omitted.
Usage
Editable example
<Stat label="Total Page Views" number="1,993,818" icon="increase" helperMessage="21% more than last month" />
Alternatively, if you do not omit components like StatLabel or StatNumber, you would write it like this.
Editable example
<Stat> <StatLabel>Total Page Views</StatLabel> <StatNumber>1,993,818</StatNumber> <StatHelperMessage> <StatIcon type="increase" /> 21% more than last month </StatHelperMessage> </Stat>
Change Color Scheme
Editable example
<Wrap gap="md"> <Stat colorScheme="secondary" label="Total Page Views" number="1,993,818" icon="increase" helperMessage="21% more than last month" /> <Stat colorScheme="green" label="Total Page Views" number="1,993,818" icon="increase" helperMessage="21% more than last month" /> </Wrap>
Center Content
To center the content, set centerContent to true.
Editable example
<Stat label="Downloads" number="18K" icon="increase" helperMessage="From August 1 to August 18" centerContent />
Display Decrease Icon
To display a decrease icon, set the type of StatIcon to decrease.
Editable example
<Wrap gap="md"> <Stat label="Total Page Views" number="1,993,818" icon="decrease" helperMessage="21% more than last month" /> <Stat> <StatLabel>Total Page Views</StatLabel> <StatNumber>1,993,818</StatNumber> <StatHelperMessage> <StatIcon type="decrease" /> 21% more than last month </StatHelperMessage> </Stat> </Wrap>
Edit this page on GitHub