# TrendChip

> Compact change indicator: arrow, signed percent and a good/bad tone, never color alone.

Source: https://ui.jcsoftdev.com/docs/components/trend-chip

Compact change indicator: arrow, signed percent and a good/bad tone, never color alone.

## Import

```ts
import { TrendChip } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/trend-chip`.

## Usage

```tsx
<TrendChip value={12.5} label="vs. semana pasada" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` * | `number` |  | Change in percent, e.g. 12.5 for +12.5%. |
| `invert` | `boolean` | `false` | Lower is better (cancelaciones, mermas): a drop reads as favorable. |
| `epsilon` | `number` | `0` | Changes whose absolute value is within this stay "flat". |
| `label` | `string` |  | Text after the number, e.g. "vs. semana pasada". |
| `locale` | `string` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-trendchip--default)
- [Down](/storybook/?path=/story/atoms-trendchip--down)
- [Flat](/storybook/?path=/story/atoms-trendchip--flat)
- [Lower Is Better](/storybook/?path=/story/atoms-trendchip--lower-is-better)
- [Narrow](/storybook/?path=/story/atoms-trendchip--narrow)
- [Brutal Preset](/storybook/?path=/story/atoms-trendchip--brutal-preset)

## Source

`packages/ui/src/atoms/trend-chip/trend-chip.tsx`