Stat

SStat is the metric tile of a dashboard: a label, the number it stands for, an optional change against a previous period and a line of context. The label is required — a number with no name tells a reader nothing — and it is also the accessible name of the tile: value and label are wrapped in one labelled group, so a screen reader reads "Revenue, 1,234,567" instead of two unrelated strings.

The trend is never conveyed by color and an arrow alone. Next to the change the component renders a visually hidden direction label (Up / Down, from the locale dictionary, overridable with trend-up-label / trend-down-label); a zero change stays neutral and gets no label, because a plain 0 already reads as no movement.

By default the tile draws no surface of its own: it is meant to sit inside an SCard or in a grid cell that already has one. variant="card" gives it a standalone look with a border, a radius and padding.

Basic usage

A numeric value is formatted with the thousands separators of the current locale. Tiles line up in a grid; icon marks the metric, description carries the period or the source.

Revenue

1,234,567

Last 30 days

Active users

8,421

Last 30 days

Conversion

12.5%

Checkout funnel

<template>
  <SStat
    label="Revenue"
    :value="1234567"
    icon="credit-card"
    description="Last 30 days"
  />
  <SStat
    label="Active users"
    :value="8421"
    icon="users"
    description="Last 30 days"
  />
  <SStat
    label="Conversion"
    value="12.5%"
    icon="filter"
    description="Checkout funnel"
  />
</template>

A string value is rendered exactly as given — use it for numbers that are already formatted (12.5%, $1.2M). format-value controls the rest: false prints the raw number, an object is passed to Intl.NumberFormat as its options.

Order id

1234567

Revenue

$1,234.50

Storage

73.2%

<template>
  <SStat
    label="Order id"
    :value="1234567"
    :format-value="false"
  />
  <SStat
    label="Revenue"
    :value="1234.5"
    :format-value="{ style: 'currency', currency: 'USD' }"
  />
  <SStat
    label="Storage"
    :value="0.732"
    :format-value="{ style: 'percent', maximumFractionDigits: 1 }"
  />
</template>

Trends

trend is the signed change: positive renders the upward treatment, negative the downward one, 0 the neutral one. trend-label says what the change is measured against.

Revenue

1,234,567

Up+12.4vs last month

Refunds

312

Down-3.2vs last month

Open tickets

48

0vs last month

<template>
  <SStat
    label="Revenue"
    :value="1234567"
    :trend="12.4"
    trend-label="vs last month"
  />
  <SStat
    label="Refunds"
    :value="312"
    :trend="-3.2"
    trend-label="vs last month"
  />
  <SStat
    label="Open tickets"
    :value="48"
    :trend="0"
    trend-label="vs last month"
  />
</template>

Card variant and sizes

variant="card" turns the tile into a standalone card; square removes its radius. size scales the value, the spacing and the icon, and color accents the icon with a name from the palette.

Sessions

24,318

Revenue

1,234,567

Up+12.4vs last month

Active users

8,421

<template>
  <SStat
    variant="card"
    size="sm"
    label="Sessions"
    :value="24318"
    icon="eye"
  />
  <SStat
    variant="card"
    label="Revenue"
    :value="1234567"
    icon="credit-card"
    color="teal"
    :trend="12.4"
    trend-label="vs last month"
  />
  <SStat
    variant="card"
    size="lg"
    label="Active users"
    :value="8421"
    icon="users"
    color="primary"
  />
</template>

A plain tile keeps its own layout inside a card, so several metrics can share one surface.

Revenue

1,234,567

Up+12.4vs last month

Orders

4,821

Down-1.8vs last month

<template>
  <SCard>
    <div class="metrics">
      <SStat
        label="Revenue"
        :value="1234567"
        :trend="12.4"
        trend-label="vs last month"
      />
      <SStat
        label="Orders"
        :value="4821"
        :trend="-1.8"
        trend-label="vs last month"
      />
    </div>
  </SCard>
</template>

Loading

While the data is in flight, loading replaces the value and the label with skeletons, hides the trend and the description, and marks the tile aria-busy.

<template>
  <SStat
    variant="card"
    :loading="pending"
    label="Revenue"
    :value="revenue"
    icon="credit-card"
  />
</template>

Slots

value, label, icon, trend and description replace the matching parts; actions puts a control in the corner of the tile, next to the label.

Revenue

1.23 M

Up+12.4

Updated a minute ago

<template>
  <SStat
    variant="card"
    label="Revenue"
    :value="1234567"
    :trend="12.4"
  >
    <template #value> 1.23 <span class="unit">M</span> </template>
    <template #actions>
      <SButton
        variant="ghost"
        size="sm"
      >
        Report
      </SButton>
    </template>
    <template #description>
      Updated
      <SBadge
        variant="positive"
        size="sm"
      >
        a minute ago
      </SBadge>
    </template>
  </SStat>
</template>

API

Props

Name	Type	Default	Description
label*	string	required	What the number means (Revenue, Active users). Required: a value without a name tells a reader nothing, and it is the accessible name of the tile.
value*	string | number	required	The metric itself. A number goes through Intl.NumberFormat (see formatValue); a string is rendered as given, for values that are already formatted ($12.5K, 99.9%).
description	string	undefined	Explanatory line under the value: the period, the source, a comparison.
icon	string	undefined	Icon next to the label: a registry name (users, credit-card, …) or a raw SVG path. Decorative — the meaning is carried by the label.
trend	number	undefined	Signed change of the metric: a positive number renders the upward treatment, a negative one the downward treatment, 0 the neutral one. The direction is announced with a hidden label, so it is not conveyed by the color and the arrow alone.
trend-label	string	undefined	Text next to the trend: what the change is measured against (vs last month).
trend-up-label	string	undefined	Hidden label of an upward trend; by default it comes from the locale dictionary.
trend-down-label	string	undefined	Hidden label of a downward trend; by default it comes from the locale dictionary.
format-value	| false | true | Intl.NumberFormatOptions	true	Formatting of a numeric value: true adds the thousands separators of the current locale, false prints the number as is, and an object is passed to Intl.NumberFormat as its options ({ style: 'currency', currency: 'USD' }). A string value is never formatted; the trend keeps its sign in every case.
locale	string	undefined	Formatting locale (for example en-GB). Derived from the library locale by default (ConfigProvider/installLocale, in Nuxt the locale option): en → en-US.
color	string	undefined	Accent color of the icon: a name from the palette (primary/teal).
size	"md" | "sm" | "lg"	"md"	Size: scales the value, the spacing and the icon.
variant	"plain" | "card"	"plain"	Surface: plain is bare text meant to sit inside an [SCard](./card) or a grid, card gives the tile its own surface, border and padding.
square	boolean	false	Square corners of the card variant: removes the border radius.
loading	boolean	false	The data is still loading: the value and the label are replaced with skeletons and the tile is marked aria-busy.

Slots

Name	Description
value	The value itself: replaces the formatted number.
label	What the number means: replaces the label prop.
icon	Media next to the label: replaces the icon.
trend	The whole trend line: the arrow, the change and its hidden direction label.
description	Explanatory line under the value: replaces the description prop.
actions	Actions in the corner of the tile: a link to the report, a period switch.