Stats

Display KPIs with supporting visuals

npm run add Stats

Use the Stats component to display key performance indicators (KPIs) such as sales, growth, or trends with supporting visuals like percentages, icons, and color indicators.

---
// Your import path to your icons might differ
import shoppingBag from '@icons/shopping-bag.svg?raw'
---

<Stats
    label="Sales"
    amount={1234}
    percentage={12}
    symbol="$"
    button={{ text: 'Details', href: '/details' }}
    icon={shoppingBag}
/>

The label and amount props are mandatory, the rest of the props are optional however. When setting the icon you can pass an SVG string or one of the icon types defined in the icon documentation page.

Percentages

Depending on the value of the percentage prop, the badge can be in one of three states; declining, stagnating, or increasing:

<Stats
    label="Negative percentage"
    symbol="$"
    amount={-1234}
    percentage={-12}
    button={{ text: 'Details', href: '/details' }}
    icon={shoppingBag}
/>

You can also pass a negative amount and it’ll be formatted in accordance with the symbol. If you want to emphasize directions, you can also specify a color prop and set the color of the amount as well:

<Stats
    label="Negative percentage"
    symbol="$"
    amount={-1234}
    percentage={-12}
    color="var(--w-color-alert)"
    button={{ text: 'Details', href: '/details' }}
    icon={shoppingBag}
/>

Action Button

The button prop can be configured with the same props as a Button component. It can function as a link or a button. You can configure themes using the theme property:

<Stats
    ...
    button={{ text: 'Details', href: '/details', theme: 'secondary' }}
/>

Card Configurations

The Stats component is based on the Card component, meaning you can use card-specific props to customize your stats by setting a card prop:

<Stats
    ...
    card={{ title: 'Last 30 days', secondary: true }}
/>

API

type StatsProps = {
    label: string
    amount: number
    percentage?: number
    symbol?: string
    color?: string
    icon?: string
    button?: ({
        text?: string
        icon?: string
    } & ButtonProps)
    card?: CardProps
    className?: string
}