Data displayGenerated from the public API
Delta
A change with a direction, coloured by meaning rather than by sign alone.
@luc/ui/dataExamples
Default
+2.5%
<Delta value={2.47} />Usage
import { Delta } from "@luc/ui/data";<Delta value={-1.8} suffix="%" />Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Delta | 8 documented props | ({ className, value, variant, invert, suffix, kind, currency, arrow, size, ...props }: DeltaProps) => import("@types/react").JSX.Element |
Delta props
Type: DeltaProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
arrow? | boolean | undefined | — | Show the arrow glyph. Default `true`. |
currency? | string | undefined | — | |
invert? | boolean | undefined | — | Treat a decrease as good — latency, error rate, drawdown. |
kind? | NumericFormatKind | undefined | — | |
size? | "sm" | "md" | "lg" | undefined | — | |
suffix? | string | undefined | — | Append the unit for absolute deltas. |
value | number | null | undefined | — | |
variant? | "percent" | "absolute" | undefined | — | Percent change (default), absolute change, or fully custom. |
Guidelines
Do
- Set `invert` where a fall is good — drawdown, error rate, latency — so the colour follows the meaning rather than the sign.
- Use `kind`, `currency` and `suffix` rather than pre-formatting the number, so the locale and the sign treatment stay consistent with `Metric`.
Don't
- Place a `Delta` before the number it describes; a reader meets the change before the value.
Accessibility
The sign is part of the text rather than the colour, and the arrow is decorative, so the change is still readable when colour is not.
Family
Data display
Dense, sortable, scannable: the surfaces a real product reads numbers from.
17 documented entries in this family. Open the family index
Related