Text

Server component, no client JS

ImportCopy Anchor Link

import { Text } from '@nizivo/react/text';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/text.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. 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.

TonesCopy Anchor Link

tone="accent" is deprecated: it paints --nz-text-brand, exactly as tone="brand" does, since Figma has no accent text for page surfaces (M38). Use tone="brand". It keeps working, with no visual change; its removal is deferred to 1.0, or to when Figma adds an accent text for page surfaces. Accent text on bg/inverse is --nz-text-inverse-accent. Card's and KpiTile's tone="accent", a surface rather than a text colour, is not deprecated.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Text } from '@nizivo/react/text';

export function TextExample(): JSX.Element {
  return (
    <div>
      <Text>Shown on product pages and checkout.</Text>
      <Text variant="body-m" tone="secondary">
        No action needed.
      </Text>
      <Text variant="numeric-kpi" tone="primary" render={<span />}>
        ₹4,82,190
      </Text>
      <Text variant="label-s" tone="tertiary" render={<span />}>
        Updated 2 min ago
      </Text>
      <Text variant="mono-m" tone="secondary" render={<code />}>
        SKU-1040
      </Text>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

TextProps type

import type { TextProps } from '@nizivo/react/text'

The props of Text, listed above.

TextState type

import type { TextState } from '@nizivo/react/text'

The render state of Text, listed above.

TextTone type

import type { TextTone } from '@nizivo/react/text'

The text/* colour tokens. accent paints --nz-text-brand, since Figma has no accent text for page surfaces (M38; --nz-text-inverse-accent is for bg/inverse).

Deprecated: 'accent', which looks exactly like 'brand'; use 'brand'. It keeps working; its removal is deferred to 1.0, or to when Figma adds an accent text for page surfaces (M42). TypeScript cannot deprecate one member of a union type, so this note is the marker. Card's and KpiTile's tone="accent", a surface, are not deprecated.

type TextTone = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "on-brand" | "on-accent" | "on-critical" | "brand" | "accent" | "success" | "warning" | "critical" | "info"

TextVariant type

import type { TextVariant } from '@nizivo/react/text'

The Figma text styles as lowercase names (Nizivo/Label/M → label-m), plus the 12 px proposals.

type TextVariant = "display-l" | "display-m" | "heading-h1" | "heading-h2" | "heading-h3" | "heading-h4" | "body-l" | "body-m" | "body-m-strong" | "body-s" | "label-l" | "label-m" | "label-m-strong" | "label-s" | "numeric-display" | "numeric-kpi" | "numeric-l" | "numeric-m" | "mono-m" | "mono-m-strong"

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.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-text.

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: none
• Ghost masters: none