---
title: Trending
summary: A trend indicator shows how a value changed. It joins the number with an arrow and a color, so users can read the direction at a glance.
description: Show how a value changed with a trend indicator. Combine a number, arrow icon, and color so users can read direction at a glance.
related: [/ui/plugins/chart, /ui/components/badge]
source: shared/ui/Trending.astro
classnames:
  component:
    - class: d-inline-flex align-items-center lh-1
      desc: Utilities that lay out the value and its arrow on one line
  color:
    - class: text-green
      desc: Rising value, paired with an arrow-up icon
    - class: text-red
      desc: Falling value, paired with an arrow-down icon
    - class: text-muted
      desc: No change, paired with a minus icon
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';

## Overview

A trend indicator is a small inline element. It shows a number and an arrow next to it. Use it next to a metric, in a stats card, or in a table row.

There is no dedicated class for it. Build it from utilities: `d-inline-flex` and `align-items-center` to keep the number and the icon in one line, `lh-1` to keep the line short, and a text color that matches the direction.

<Example centered>
<span class="text-green d-inline-flex align-items-center lh-1"> 25% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
</Example>

## Variants

### Direction

Use three states to describe the change. Pick the color and the icon together, so they always tell the same story.

| Change | Color | Icon |
| --- | --- | --- |
| Up | `text-green` | `arrow-up` |
| No change | `text-secondary` | `minus` |
| Down | `text-red` | `arrow-down` |

<Example centered>
<span class="text-green d-inline-flex align-items-center lh-1"> 25% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
<span class="text-secondary d-inline-flex align-items-center lh-1"> 0% <Icon name="minus" size="sm" class="ms-0" /> </span>
<span class="text-red d-inline-flex align-items-center lh-1"> -12% <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
</Example>

### Unit

The unit is only text after the number. Use a percent sign, a currency, or no unit at all.

<Example centered>
<span class="text-green d-inline-flex align-items-center lh-1"> 8% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
<span class="text-green d-inline-flex align-items-center lh-1"> 4.2K <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
<span class="text-red d-inline-flex align-items-center lh-1"> -3 <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
</Example>

### Size

The indicator takes the font size of its parent. Put it in a heading or use a text size utility to make it bigger or smaller.

<Example centered vertical>
<span class="text-green d-inline-flex align-items-center lh-1 small"> 15% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
<span class="text-green d-inline-flex align-items-center lh-1"> 15% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
<span class="text-green d-inline-flex align-items-center lh-1 h2 m-0"> 15% <Icon name="arrow-up" class="ms-0" /> </span>
</Example>

## Examples

### Next to a value

Place the indicator after the number. Use `align-items-baseline` on the wrapper, so the number and the indicator sit on the same line.

<Example>
<div>
  <div class="text-secondary">Today's sales</div>
  <div class="d-flex align-items-baseline">
    <div class="h3 me-2 mb-0">6,782</div>
    <span class="text-green d-inline-flex align-items-center lh-1"> 7% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
  </div>
</div>
</Example>

### In a stats card

This is the most common place for the indicator. The value stays on the left and the change on the right.

<Example column>
<div class="card">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col">
        <div class="text-secondary">New clients</div>
        <div class="h3 m-0">1,352</div>
      </div>
      <div class="col-auto">
        <span class="text-red d-inline-flex align-items-center lh-1"> -4% <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
      </div>
    </div>
  </div>
</div>
</Example>

### In a table

Use it in a table cell to compare rows quickly.

<Example>
<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Sales</th>
      <th>Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic plan</td>
      <td>4,120</td>
      <td>
        <span class="text-green d-inline-flex align-items-center lh-1"> 12% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
      </td>
    </tr>
    <tr>
      <td>Pro plan</td>
      <td>2,043</td>
      <td>
        <span class="text-red d-inline-flex align-items-center lh-1"> -7% <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
      </td>
    </tr>
    <tr>
      <td>Team plan</td>
      <td>986</td>
      <td>
        <span class="text-secondary d-inline-flex align-items-center lh-1"> 0% <Icon name="minus" size="sm" class="ms-0" /> </span>
      </td>
    </tr>
  </tbody>
</table>
</Example>

## Accessibility

- Keep the sign in the text, for example `-12%`. Users who do not see color still get the direction.
- The icon is hidden from screen readers, so it must not be the only carrier of meaning.
- Add a word like `Change` in the table header or near the value, so it is clear what the number means.