Trend Chip

Usage

TrendChip is a small, trend-aware chip that pairs a numeric value with a directional caret and contextual color. Set trend to "up", "down", or "neutral" and the chip picks the matching arrow and color automatically — put the value text inside as children.

import { TrendChip } from "@blakeui/pro-react";

function App() {
  return <TrendChip trend="up">12.5%</TrendChip>;
}

Trends

Each direction selects its own caret and color. "up" is success, "down" is danger, and "neutral" is neutral with no caret rendered.

<TrendChip trend="up">8.2%</TrendChip>
<TrendChip trend="down">3.1%</TrendChip>
<TrendChip trend="neutral">0.0%</TrendChip>

Sizes

Three sizes are available via the size prop. "sm" is the default.

<TrendChip size="sm" trend="up">4.0%</TrendChip>
<TrendChip size="md" trend="up">4.0%</TrendChip>
<TrendChip size="lg" trend="up">4.0%</TrendChip>

Variants

The variant prop maps onto the underlying chip style. "soft" is the default.

<TrendChip trend="up" variant="primary">2.4%</TrendChip>
<TrendChip trend="up" variant="secondary">2.4%</TrendChip>
<TrendChip trend="up" variant="soft">2.4%</TrendChip>
<TrendChip trend="up" variant="tertiary">2.4%</TrendChip>

Prefix and suffix

Wrap the value with TrendChip.Prefix and TrendChip.Suffix to add contextual text before and after the number.

<TrendChip trend="up">
  <TrendChip.Prefix>+</TrendChip.Prefix>
  18.6%
  <TrendChip.Suffix>vs. last week</TrendChip.Suffix>
</TrendChip>

Custom indicator

Pass TrendChip.Indicator with a custom SVG to replace the default caret. The child icon is cloned with the indicator slot class applied.

<TrendChip trend="up">
  <TrendChip.Indicator>
    <svg fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </TrendChip.Indicator>
  6.7%
</TrendChip>

Anatomy

Import the TrendChip component and access all parts using dot notation.

import { TrendChip } from "@blakeui/pro-react";

<TrendChip>
  <TrendChip.Prefix />
  <TrendChip.Indicator />
  <TrendChip.Suffix />
</TrendChip>;

CSS Classes

Base & Size Classes

• .trend-chip - Base chip wrapper
• .trend-chip--sm - Small size (default)
• .trend-chip--md - Medium size
• .trend-chip--lg - Large size

Element Classes

• .trend-chip__indicator - Trend arrow icon
• .trend-chip__value - Numeric value text (tabular-nums applied)
• .trend-chip__prefix - Text before the value
• .trend-chip__suffix - Text after the value

Data Attributes

• [data-trend="up"] / [data-trend="down"] / [data-trend="neutral"] on the root - Current trend direction

API Reference

TrendChip

The root component. Wraps BlakeUI Chip with trend-aware coloring and arrow icons.

Also supports all BlakeUI Chip props except children, color, and size.

TrendChip.Indicator

Custom trend arrow icon. When omitted, a default directional caret is rendered based on the trend prop. No caret is rendered for the neutral trend.

Also supports all native svg HTML attributes.

TrendChip.Prefix

Text displayed before the value.

Also supports all native span HTML attributes.

TrendChip.Suffix

Text displayed after the value.

Also supports all native span HTML attributes.