## Feature Examples

### Trends
- description: Set the trend with `value` prop. A positive value is displayed in green with an arrow pointing up, a negative value in red with an arrow pointing down. Zero is displayed in a neutral color without an arrow.
- example:
```jsx
<StorybookComponents.Stack>
  <TrendIndicator value={21} />
  <TrendIndicator value={0} />
  <TrendIndicator value={-11} />
</StorybookComponents.Stack>;
```

### Inverted trends
- description: By default a positive value is green and a negative value is red. Swap the colors with `inverted` prop for metrics where growth is undesirable, such as bounce rate or refunds. The arrow keeps following the sign of the value.
- example:
```jsx
<StorybookComponents.Stack>
  <TrendIndicator value={21} inverted />
  <TrendIndicator value={0} inverted />
  <TrendIndicator value={-11} inverted />
</StorybookComponents.Stack>;
```

### Format
- description: Control how the value is displayed with `format` prop. It supports 2 options: - `percent` (default) displays the value as a percentage. - `decimal` displays the value as an absolute number, for example a change in the number of orders.
- example:
```jsx
<StorybookComponents.Stack>
  <TrendIndicator value={12.5} />
  <TrendIndicator value={1250} format="decimal" />
</StorybookComponents.Stack>;
```

### Locale
- description: Format the number according to a language with `locale` prop. It controls the decimal separator, digit grouping and the position of the percent sign. The default locale is `en`.
- example:
```jsx
<StorybookComponents.Stack>
  <TrendIndicator value={12.5} locale="en" />
  <TrendIndicator value={12.5} locale="de" />
  <TrendIndicator value={-1250} format="decimal" locale="de" />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Table column
- description: Use trend indicators in a table column to compare how each item changed over the period at a glance.
- example:
```jsx
() => {
  const records = [
    { name: 'Online store', sales: '$12,480', change: 8.4 },
    { name: 'Bookings', sales: '$6,120', change: -3.2 },
    { name: 'Events', sales: '$2,950', change: 0 },
    { name: 'Restaurant orders', sales: '$4,310', change: 15.7 },
  ];
  const columns = [
    { title: 'Channel', render: (row) => row.name },
    { title: 'Sales', render: (row) => row.sales },
    {
      title: 'vs. Aug 2026',
      width: '140px',
      render: (row) => <TrendIndicator value={row.change} />,
    },
  ];

  return (
    <Card hideOverflow>
      <Table data={records} columns={columns} rowVerticalPadding="medium">
        <TableToolbar>
          <TableToolbar.Title>Sales by channel</TableToolbar.Title>
        </TableToolbar>
        <Table.Content />
      </Table>
    </Card>
  );
};
```