Trend Indicator
Display trend direction and percentage change
SaaSAnalytics
Overview
TrendIndicator shows a directional trend with a percentage value, color-coded icon (up/down/neutral), and an optional contextual label. It supports three sizes and is commonly used alongside StatCard or other metric displays.
Usage
import { TrendIndicator } from "@leanicon/web-builder-library/saas";
<TrendIndicator trend={{ value: 12.5, direction: "up", label: "vs last month" }} size="md" />;Variants
Default
+12.5%vs last month
Dark
+12.5%vs last month
Trend Up
+24.8%vs last month
Trend Down
7.3%vs last month
Trend Neutral
0.0%no change
Size Small
+5.4%vs last week
Size Medium
+5.4%vs last week
Size Large
+5.4%vs last week
Without Label
+18.0%
Without Label (Down)
3.6%
All Directions
+12.5%vs last month4.2%vs last month0.0%no change
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
trend | TrendData | — | Yes | |
showLabel | boolean | true | No | |
size | enum | md | No |