KpiTile

Compact metric tile with a label, a value and an optional delta. The size prop (xs, sm, md, lg, xl) sets the padding and value font size.

Jump to API reference

Import

Vue

import { UiKpiTile } from '@ziyarago/ui/vue'

Default

Bookings today128+12% vs yesterday

Vue

<UiKpiTile
  label="Bookings today"
  value="128"
  delta="+12%"
  sub="vs yesterday"
 />

Negative delta

Cancellations7-3% this week

Vue

<UiKpiTile label="Cancellations" value="7" delta="-3%" sub="this week" />

Sizes

Bookings today128+12% vs yesterday

Vue

<UiKpiTile
  label="Bookings today"
  value="128"
  delta="+12%"
  sub="vs yesterday"
  size="xs"
 />

<UiKpiTile
  label="Bookings today"
  value="128"
  delta="+12%"
  sub="vs yesterday"
  size="sm"
 />

<UiKpiTile
  label="Bookings today"
  value="128"
  delta="+12%"
  sub="vs yesterday"
  size="md"
 />

<UiKpiTile
  label="Bookings today"
  value="128"
  delta="+12%"
  sub="vs yesterday"
  size="lg"
 />

<UiKpiTile
  label="Bookings today"
  value="128"
  delta="+12%"
  sub="vs yesterday"
  size="xl"
 />

API reference

Key metric tile with a label, large value and optional delta, for dashboards.

Props

PropType and valuesDefaultDescription

labelrequiredstring—Metric name.

valuerequiredstring | number—Main value, shown large.

substring—Small text next to the delta.

deltastring—Change indicator such as "+12%" or "-3.4%". A leading "-" renders as a decrease, anything else as an increase.

variantbrandinverse—Filled brand tile or dark inverse tile. Omit for the default glass tile.

sizexssmmdlgxl'md'Padding and value size.