Server component, no client JS

ImportCopy Anchor Link

import { Heading } from '@nizivo/react/heading';

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

export function HeadingExample(): JSX.Element {
  return (
    <div>
      <Heading level={1}>Good morning, Asha</Heading>
      {/* The outline level and the look are independent: an <h2> drawn as Heading/H4. */}
      <Heading level={2} variant="heading-h4">
        Revenue
      </Heading>
      <Heading level={3} tone="secondary">
        No orders yet
      </Heading>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

HeadingLevel type

import type { HeadingLevel } from '@nizivo/react/heading'

The document outline level: <h1> to <h6>.

type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6

HeadingProps type

import type { HeadingProps } from '@nizivo/react/heading'

The props of Heading, listed above.

HeadingState type

import type { HeadingState } from '@nizivo/react/heading'

The render state of Heading, listed above.

HeadingVariant type

import type { HeadingVariant } from '@nizivo/react/heading'

The Figma display and heading text styles.

type HeadingVariant = "display-l" | "display-m" | "heading-h1" | "heading-h2" | "heading-h3" | "heading-h4"

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-heading.

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