---
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 value change with a trend indicator.
layout: '@layouts/DocsMdxLayout.astro'
---
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-muted` | `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-muted 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 bg="surface-secondary" 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-muted 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.