Trend Chip

Usage

TrendChip is for a delta sitting beside the number it moves: a percentage next to a revenue figure, a change column in a table, the badge under a KPI. Set trend and the chip picks its own caret and colour — up is success, down is danger, neutral is the plain default with no caret at all. The value itself is children, so it stays yours to format.

It is a presentation component, not a control. There is nothing to press, no state to own, and the whole thing collapses to a single <span> — put it inline anywhere a word would go.

The direction is carried by the caret's shape, not only by the colour, so up and down stay distinguishable without hue. It is not carried in the accessible name: the caret is aria-hidden and a screen reader hears the value alone — 8.2%, with nothing to say which way it moved. Put the sign in the text with a TrendChip.Prefix of + or − when the direction has to survive without sight.

Anatomy

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

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

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

All three parts are optional, and everything you do not hand to one of them becomes the value. The indicator is supplied for you on up and down, so the common case is a chip with children and nothing else.

Custom Indicator

TrendChip.Indicator clones the icon you give it with the indicator slot class applied, so the icon inherits the chip's size ramp and its currentColor. It also fills the one gap in the defaults: neutral renders no caret on its own.

Prefix and Suffix

Neither part carries a margin, which is what a sign or a unit wants — a word-shaped suffix has to ask for its own space, as the last two chips above do with className="ml-1". Both affixes paint --color-muted rather than the trend colour, which keeps them reading as supporting text but also puts them under AA against every fill, from 4.59:1 on a light tertiary chip down to 1.45:1 on a primary down chip. Keep them short and keep the meaning in the value.

Sizes

Tabular Nums

The value is always set in tabular figures — .trend-chip__value carries font-variant-numeric: tabular-nums with no prop to turn it off — so every digit takes the same advance and a column of same-length values comes out to exactly the same chip width.

Variants

Measured on the demo surface, the value clears AA (4.5:1) everywhere except up in light theme — secondary 3.54:1, soft 3.79:1, tertiary 4.28:1 — and its mirror image, down in dark theme — 3.92:1, 3.45:1, 3.47:1. Those numbers fall out of --success-soft-foreground and --danger-soft-foreground in @blakeui/styles, so closing them is a package release rather than anything this component can do; primary is comfortably above the line in both themes, and the caret clears the 3:1 non-text floor in every combination.

CSS Classes

Base & Size Classes

• .trend-chip — The root hook, composed onto BlakeUI's .chip. The chip is what actually paints the pill — background, radius, padding, type — and trend-chip.css declares no rules against .trend-chip itself; it exists so you can target a trend chip without catching every chip on the page.
• .trend-chip--sm / .trend-chip--md / .trend-chip--lg — Set the indicator box to 0.75rem, 0.875rem or 1rem square. The rest of the size — padding and type — comes from the matching .chip--sm / .chip--md / .chip--lg, so the two ramps move together. sm is the default.

Element Classes

• .trend-chip__indicator — The caret. flex-shrink: 0, sized by the size modifier above. Applied to the built-in caret and cloned onto whatever you pass to TrendChip.Indicator.
• .trend-chip__value — The number. font-variant-numeric: tabular-nums, always.
• .trend-chip__prefix / .trend-chip__suffix — Text either side of the value. color: var(--color-muted, currentColor), so both drop out of the trend colour.

Data Attributes

• [data-trend="up"] / [data-trend="down"] / [data-trend="neutral"] — Current direction, on the root. This is the selector for the root: the underlying chip sets [data-slot="chip"] there last and wins, so there is no [data-slot="trend-chip"] to hook.
• [data-slot="trend-chip-indicator"] / [data-slot="trend-chip-value"] / [data-slot="trend-chip-prefix"] / [data-slot="trend-chip-suffix"] — The parts, for styling from outside without depending on the BEM names.

API Reference

TrendChip

The root. Wraps BlakeUI Chip with trend-aware colouring and a directional caret, and accepts every Chip prop except children, color and size.

TrendChip.Indicator

Replaces the built-in caret. The child is cloned with the indicator slot class applied, so it takes the size ramp and currentColor from the chip. Also accepts every native <svg> attribute, which is forwarded onto the clone.

TrendChip.Prefix

Text before the value — a sign, a currency symbol, a unit. Renders a <span> and accepts every native <span> attribute.

TrendChip.Suffix

Text after the value — a comparison period, a unit, a qualifier. Renders a <span> and accepts every native <span> attribute.