Stat

Stat is used to display numbers or data within a box.

Import

import {
  Stat,
  StatLabel,
  StatNumber,
  StatHelperMessage,
  StatIcon,
} from "@yamada-ui/react"

Copied!

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"
/>

Copied!

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>

Copied!

Change Color Scheme

Editable example

<Wrap gap="md">
  <For each={["secondary", "green"]}>
    {(colorScheme, index) => (
      <Stat
        key={index}
        colorScheme={colorScheme}
        label="Total Page Views"
        number="1,993,818"
        icon="increase"
        helperMessage="21% more than last month"
      />
    )}
  </For>
</Wrap>

Copied!

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
/>

Copied!

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>

Copied!

Edit this page on GitHub

PreviousCard NextTable