> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# TrendPill

> A filled pill stating a change, green for positive and red for negative (Figma `V2 Trend Pill`).

```tsx theme={null}
import { TrendPill } from "@fanvue/ui";
import type { TrendDirection, TrendPillProps } from "@fanvue/ui";
```

## Examples

## Negative

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-trendpill--negative&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TrendPill — Negative" />
</Frame>

```tsx theme={null}
import { TrendPill } from "@fanvue/ui";

<TrendPill label="$120 vs Jun" trend="negative" />
```

## Positive

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-trendpill--positive&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TrendPill — Positive" />
</Frame>

```tsx theme={null}
import { TrendPill } from "@fanvue/ui";

<TrendPill label="$240 vs Jun" trend="positive" />
```

## Both directions

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-trendpill--both-directions&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TrendPill — Both directions" />
</Frame>

```tsx theme={null}
import { TrendPill } from "@fanvue/ui";

<div className="flex items-center gap-2">
  <TrendPill label="$240 vs Jun" trend="positive" />
  <TrendPill label="$120 vs Jun" trend="negative" />
</div>
```

## Props

## TrendPill

A filled pill stating a change, green for positive and red for negative (Figma `V2 Trend Pill`).

Distinct from `ChartCard`'s `trendChip`, which is Figma's `V2 Trend`: an unfilled arrow and label sitting beside a headline. Use this one where the change needs to hold its own against surrounding content rather than trail a number, such as inside a list row.

<ParamField path="label" type="ReactNode" required>
  The change itself, already formatted (e.g. "\$240 vs Jun").
</ParamField>

<ParamField path="trend" type="&#x22;negative&#x22; | &#x22;positive&#x22;" required>
  Drives the colour and the leading glyph.
</ParamField>

<ParamField path="decreaseLabel" type="string" default="Decrease">
  As `increaseLabel`, for `"negative"`.
</ParamField>

<ParamField path="increaseLabel" type="string" default="Increase">
  Announced before `label` when `trend` is `"positive"`. Overridable because the component cannot translate it.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `TrendDirection`, `TrendPillProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)