EEnterUI
DocsComponentsThemesDonation
Get Started
      • TrendIndicator
      • ComparisonMetric
EnterUIDocsData AnalyticsMetrics and ChartsTrends and ComparisonTrendIndicator
Data AnalyticsUpdated 6 May 2026

TrendIndicator

Compact directional delta for metrics, tables, and KPI rows.

TrendIndicator shows a positive, negative, or neutral delta without turning a dashboard into a color chart.

#Default usage

Trend

Use beside metrics where a small delta is enough.

↑+12.4%vs last month
Code
<TrendIndicator direction="up" format="percent" value={12.4} label="vs last month" />

#Import

Code
import { TrendIndicator } from "@froggdesign/enter-ui-react";

#Patterns

Metric row deltas

Auto tone maps up/down/flat to positive, negative, and neutral.

↑+8%activation↓+3%errors→0quota

#Accessibility

The root exposes an accessible label such as up +12.4% vs last month. Use a visible label when the delta needs context.

#API

  • value: numeric or rendered delta value.
  • direction: up, down, or flat.
  • tone: auto, positive, negative, or neutral.
  • format: percent or number.
  • label: optional visible context.
  • className: style hook for layout.
  • Legacy trend="up | down | neutral" remains supported.

#Styling

TrendIndicator uses .eui-trend-indicator, .eui-trend-indicator__icon, .eui-trend-indicator__value, and .eui-trend-indicator__label. Keep it compact; use tone="auto" unless the surrounding product copy changes the meaning.

PreviousHeatmap
NextComparisonMetric

On this page

  1. Default usage
  2. Import
  3. Patterns
  4. Accessibility
  5. API
  6. Styling