Delta

Server component, no client JS

ImportCopy Anchor Link

import { Delta } from '@nizivo/react/delta';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/delta.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. The number is formatted on the server with Intl.NumberFormat. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

On a tinted surfaceCopy Anchor Link

Inside a Card, KpiTile or TrendCard with tone="brand" or tone="accent", the pill is bg/surface, because Figma's bg/success-subtle is the same colour as bg/brand-subtle and the pill would show no fill there (a deviation from Figma 04 gap 4, M42). Its text colour, and so its contrast, is unchanged. Set --nz-delta-bg to choose another fill.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Delta } from '@nizivo/react/delta';

export function DeltaExample(): JSX.Element {
  return (
    <div>
      <Delta value={0.124} comparison="vs last week" />
      <Delta value={-0.031} comparison="vs last week" />
      <Delta value={0} comparison="vs last week" />
      {/* A rise in refunds is bad news */}
      <Delta value={0.08} tone="critical" comparison="refunds vs last month" />
      <Delta value={1250} format={{ style: 'currency', currency: 'EUR' }} locale="de-DE" />
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

DeltaProps type

import type { DeltaProps } from '@nizivo/react/delta'

The props of Delta, listed above.

DeltaState type

import type { DeltaState } from '@nizivo/react/delta'

The render state of Delta, listed above.

DeltaTone type

import type { DeltaTone } from '@nizivo/react/delta'

The colour: up is success, down is critical, flat is neutral unless tone says otherwise.

type DeltaTone = "success" | "critical" | "neutral"

DeltaTrend type

import type { DeltaTrend } from '@nizivo/react/delta'

Figma "Trend", derived from the sign of value.

type DeltaTrend = "up" | "down" | "flat"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-delta, .nz-delta-icon, .nz-delta-value.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: Figma node 7275:13743
• Ghost masters: Figma node 752:269