# 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. Show how a value changed with a trend indicator. Combine a number, arrow icon, and color so users can read direction at a glance. Source: https://docs.tabler.io/ui/components/trending --- ## 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. ```html 25% ``` ## 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` | ```html 25% 0% -12% ``` ### Unit The unit is only text after the number. Use a percent sign, a currency, or no unit at all. ```html 8% 4.2K -3 ``` ### 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. ```html 15% 15% 15% ``` ## 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. ```html

Today's sales

6,782

``` ### 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. ```html

New clients

1,352

-4%

``` ### In a table Use it in a table cell to compare rows quickly. ```html

Product	Sales	Change
Basic plan	4,120	12%
Pro plan	2,043	-7%
Team plan	986	0%

``` ## 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.