A React trend chip for web metrics with direction, percentage, icon, and contextual suffix.
Import the TrendChip component and access all parts using dot notation.
import {TrendChip} from "@heroui-pro/react";
<TrendChip>
<TrendChip.Prefix />
<TrendChip.Indicator />
<TrendChip.Suffix />
</TrendChip>.trend-chip - Base chip wrapper.trend-chip--sm - Small size (default).trend-chip--md - Medium size.trend-chip--lg - Large size.trend-chip__indicator - Trend arrow icon.trend-chip__value - Numeric value text.trend-chip__prefix - Text before the value.trend-chip__suffix - Text after the value[data-trend="up"] / [data-trend="down"] / [data-trend="neutral"] on the root - Current trend directionThe root component. Wraps HeroUI Chip with trend-aware coloring and arrow icons.
| Prop | Type | Default | Description |
|---|---|---|---|
trend | 'up' | 'down' | 'neutral' | 'up' | Trend direction; controls arrow icon and color (success/danger/warning) |
size | 'sm' | 'md' | 'lg' | 'sm' | Size variant |
variant | 'primary' | 'secondary' | 'soft' | 'tertiary' | 'soft' | Chip style variant |
children | ReactNode | - | Value text, optional Indicator, Prefix, and Suffix sub-components |
Also supports all HeroUI Chip props except children, color, and size.
Custom trend arrow icon. When omitted, a default directional arrow is rendered based on the trend prop.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom SVG icon element |
Also supports all native svg HTML attributes.
Text displayed before the value.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Prefix text |
Also supports all native span HTML attributes.
Text displayed after the value.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Suffix text |
Also supports all native span HTML attributes.