# Delta

Source: https://lumeo.nativ.sh/components/delta

# Delta

Trend indicator showing delta value with up/down arrow and color.

## When to Use

-   Show percentage or absolute change next to a KPI metric.
-   Indicate revenue growth, churn delta, or inventory variance at a glance.
-   Use `Positive="DeltaDirection.Bad"` for metrics where lower is better (e.g. error rate).

Preview Code

Percent Delta

+12.5% \-3.2% 0%

Copy Code

Preview Code

Absolute Delta

+420 \-88

Copy Code

Preview Code

Inverted Positive (Lower is Better)

\-5.1% +2.3%

Copy Code

Preview Code

No Arrow

+7.4% \-1.9%

Copy Code

## API Reference

### Delta

Property

Type

Default

Description

Value

double

0

The numeric delta. Positive renders green (good), negative renders red (bad) by default.

Format

DeltaFormat

Percent

Display format. `Percent` appends %; `Absolute` shows raw number.

Positive

DeltaDirection

Good

Determines color semantics. `Good` = up is green; `Bad` = up is red (for metrics like churn or error rate).

ShowArrow

bool

true

Whether to show the directional arrow icon.

Class

string?

null

Additional CSS classes merged onto the root span.

## Related Components

-   [KpiCard](/components/kpi-card) — Dashboard KPI tile that embeds a Delta for trend display.
-   [SparkCard](/components/spark-card) — Small card with an inline sparkline chart.
-   [Statistic](/components/statistic) — Big-number statistic display with label and unit.