Trending
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.
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.
25%
<span class="text-green d-inline-flex align-items-center lh-1"> 25% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>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 |
25%
0%
-12%
<span class="text-green d-inline-flex align-items-center lh-1"> 25% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>
<span class="text-secondary d-inline-flex align-items-center lh-1"> 0% <!-- Download SVG icon from http://tabler.io/icons/icon/minus -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M5 12l14 0" />
</svg>
</span>
<span class="text-red d-inline-flex align-items-center lh-1"> -12% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-down -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 13l-6 6" />
<path d="M6 13l6 6" />
</svg>
</span>Unit
The unit is only text after the number. Use a percent sign, a currency, or no unit at all.
8%
4.2K
-3
<span class="text-green d-inline-flex align-items-center lh-1"> 8% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>
<span class="text-green d-inline-flex align-items-center lh-1"> 4.2K <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>
<span class="text-red d-inline-flex align-items-center lh-1"> -3 <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-down -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 13l-6 6" />
<path d="M6 13l6 6" />
</svg>
</span>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.
15%
15%
15%
<span class="text-green d-inline-flex align-items-center lh-1 small"> 15% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>
<span class="text-green d-inline-flex align-items-center lh-1"> 15% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>
<span class="text-green d-inline-flex align-items-center lh-1 h2 m-0"> 15% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>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.
Today's sales
6,782
7%
<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% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</span>
</div>
</div>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.
New clients
1,352
-4%
<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% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-down -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 13l-6 6" />
<path d="M6 13l6 6" />
</svg>
</span>
</div>
</div>
</div>
</div>In a table
Use it in a table cell to compare rows quickly.
| Product | Sales | Change |
|---|---|---|
| Basic plan | 4,120 | 12% |
| Pro plan | 2,043 | -7% |
| Team plan | 986 | 0% |
<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% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-up -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 11l-6 -6" />
<path d="M6 11l6 -6" />
</svg>
</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% <!-- Download SVG icon from http://tabler.io/icons/icon/arrow-down -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M12 5l0 14" />
<path d="M18 13l-6 6" />
<path d="M6 13l6 6" />
</svg>
</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% <!-- Download SVG icon from http://tabler.io/icons/icon/minus -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon ms-0 icon-sm">
<path d="M5 12l14 0" />
</svg>
</span>
</td>
</tr>
</tbody>
</table>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
Changein the table header or near the value, so it is clear what the number means.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
d-inline-flex align-items-center lh-1 | component | Utilities that lay out the value and its arrow on one line |
text-green | color | Rising value, paired with an arrow-up icon |
text-red | color | Falling value, paired with an arrow-down icon |
text-muted | color | No change, paired with a minus icon |
