---
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-secondary
      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.