Fanvue API Documentation

import { TrendPill } from "@fanvue/ui";
import type { TrendDirection, TrendPillProps } from "@fanvue/ui";

Examples

Negative

import { TrendPill } from "@fanvue/ui";

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

Positive

import { TrendPill } from "@fanvue/ui";

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

Both directions

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.

ReactNode

required

The change itself, already formatted (e.g. “$240 vs Jun”).

"negative" | "positive"

required

Drives the colour and the leading glyph.

string

default:"Decrease"

As increaseLabel, for "negative".

string

default:"Increase"

Announced before label when trend is "positive". Overridable because the component cannot translate it.

Exported types

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

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

TrendPill

Examples

Negative

Positive

Both directions

Props

TrendPill

Exported types

​Examples

​Negative

​Positive

​Both directions

​Props

​TrendPill

​Exported types

Examples

Negative

Positive

Both directions

Props

TrendPill

Exported types