Trend

Part of the extras bundle, not included by default.

Intent

A small semibold inline span color-coded for direction -- "+12.5%" in success-green for up, "-8" in danger-red for down, "0.0%" in muted text for neutral. Use anywhere a delta value benefits from chromatic emphasis: stat-card descriptions, table cells with change indicators, inline status callouts in prose, change-log entries.

Basic usage

+12.5% -8.3% 0.0%

<div class="cluster">
    <span class="trend is-up">+12.5%</span>
    <span class="trend is-down">-8.3%</span>
    <span class="trend is-neutral">0.0%</span>
</div>

With an authored icon

The class is an inline-flex with a small gap, so pairing an authored SVG arrow with the value works without extra wiring. Brio doesn't paint the arrow -- icons are content-via-markup (P8).

12.5% 8.3% 0.0%

<div class="cluster">
    <span class="trend is-up">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg>
        12.5%
    </span>
    <span class="trend is-down">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
        8.3%
    </span>
    <span class="trend is-neutral">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        0.0%
    </span>
</div>

Inline in prose

Q3 closed with revenue up +12.5% against the prior quarter, while support tickets fell -8 from the previous week's spike.

<p>Q3 closed with revenue up <span class="trend is-up">+12.5%</span> against the prior quarter, while support tickets fell <span class="trend is-down">-8</span> from the previous week&#39;s spike.</p>

Customization

The single chromatic axis flows through --trend-color; variants remap it to brio's semantic status colors. Override the token per-instance for non-standard semantics -- a "warning trend" that wants amber rather than red, or a brand-tinted delta that pulls --color-primary instead of success-green.

↑ 92% +1,204

<div class="cluster">
    <span class="trend" style="--trend-color: var(--color-warning)">↑ 92%</span>
    <span class="trend" style="--trend-color: var(--color-primary)">+1,204</span>
</div>

Accessibility

Color alone isn't sufficient to convey "up" vs "down" -- screen readers won't announce the visual color, and users with red-green color blindness can't reliably distinguish the variants. Pair the chromatic indicator with a textual sign (+, -) or an arrow icon so the direction is communicated through more than one channel.
When the trend is the only chromatic content, leave the SVG aria-hidden="true"; the textual sign carries the meaning to assistive tech.

Markup

<span class="trend is-up">+12.5%</span>
<span class="trend is-down">-8.3%</span>
<span class="trend is-neutral">0.0%</span>

<!-- With an authored arrow -->
<span class="trend is-up">
    <svg aria-hidden="true">...</svg>
    12.5%
</span>

CSS Reference: Trend

Inline up, down, or neutral trend indicator

Source: src/css/extras/trend.css

Tokens

Token	Default	Description
`--trend-color`	`var(--color-text-subtle)`	Chromatic color axis, remapped by direction variants

Classes

Class	Description
`.trend`	component root
`.is-up`	Upward trend, colored with success
`.is-down`	Downward trend, colored with danger
`.is-neutral`	Flat or unchanged trend, colored with subtle text