KpiInline

Single-line metric with label, value and delta for dense toolbars. The size prop (xs, sm, md, lg, xl) sets the value font size.

Jump to API reference

Import

Vue

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

Inline

RevenueSAR 84k+8%RefundsSAR 2k-1%

Vue

<UiKpiInline label="Revenue" value="SAR 84k" delta="+8%" />

<UiKpiInline label="Refunds" value="SAR 2k" delta="-1%" />

Sizes

RevenueSAR 84k+8%RevenueSAR 84k+8%RevenueSAR 84k+8%RevenueSAR 84k+8%RevenueSAR 84k+8%

Vue

<UiKpiInline label="Revenue" value="SAR 84k" delta="+8%" size="xs" />

<UiKpiInline label="Revenue" value="SAR 84k" delta="+8%" size="sm" />

<UiKpiInline label="Revenue" value="SAR 84k" delta="+8%" size="md" />

<UiKpiInline label="Revenue" value="SAR 84k" delta="+8%" size="lg" />

<UiKpiInline label="Revenue" value="SAR 84k" delta="+8%" size="xl" />

API reference

Compact inline metric with a label, value and delta, for toolbars and card headers.

Props

PropType and valuesDefaultDescription

labelrequiredstring—Metric name.

valuerequiredstring | number—Main value.

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

sizexssmmdlgxl'md'Value font size.