EmptyState

Server component, no client JS

ImportCopy Anchor Link

import { EmptyState } from '@nizivo/react/empty-state';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/empty-state.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. Its actions ship whatever their own components ship. 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.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { EmptyState } from '@nizivo/react/empty-state';

/** Stands in for the Figma render (a box illustration); renders are not shipped. */
function BoxRender(): JSX.Element {
  return (
    <svg viewBox="0 0 140 140" width="140" height="140" aria-hidden="true">
      <rect x="30" y="40" width="80" height="70" rx="8" fill="currentColor" opacity="0.2" />
    </svg>
  );
}

export function EmptyStateExample(): JSX.Element {
  return (
    <div>
      <EmptyState
        title="No orders yet"
        media={<BoxRender />}
        actions={<Button variant="primary">Share your store</Button>}
      />
      <EmptyState
        level={3}
        title="Nothing matches “stoneware”"
        actions={<Button>Clear search</Button>}
      />
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

EmptyStateProps type

import type { EmptyStateProps } from '@nizivo/react/empty-state'

The props of EmptyState, listed above.

EmptyStateTitleLevel type

import type { EmptyStateTitleLevel } from '@nizivo/react/empty-state'

type EmptyStateTitleLevel = 2 | 3 | 4 | 5 | 6

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-empty-state, .nz-empty-state-actions, .nz-empty-state-media, .nz-empty-state-title.

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:15168
• Ghost masters: Figma node 756:1149