Separator

Server component, no client JS

ImportCopy Anchor Link

import { Separator } from '@nizivo/react/separator';

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

Decorative by defaultCopy Anchor Link

A Separator is decorative unless you say otherwise: it renders <hr role="none">, so a screen reader skips it, as Figma's Divider (7370:95) intends ("spacing first, a line only when spacing is not enough"). Most lines between actions, rows or card sections only draw. Pass decorative={false} for a break that means something on its own, such as the rule above an order total or between two groups of settings: the <hr> keeps its implicit separator role, with aria-orientation when it is vertical.

<>
  <Separator decorative={false} />
  <Inline gap="3">
    <span>Edit</span>
    <Separator orientation="vertical" />
    <span>Archive</span>
  </Inline>
</>

Until 2026-10-18 the default was decorative={false} (the maintainer's decision M35 changed it before 0.1.0).

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.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Inline } from '@nizivo/react/inline';
import { Stack } from '@nizivo/react/stack';
import { Separator } from '@nizivo/react/separator';

export function SeparatorExample(): JSX.Element {
  return (
    <Stack gap="3">
      <div>Subtotal</div>
      <Separator decorative={false} />
      <div>Total</div>
      <Inline gap="3">
        <span>Edit</span>
        <Separator orientation="vertical" />
        <span>Archive</span>
      </Inline>
    </Stack>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

SeparatorProps type

import type { SeparatorProps } from '@nizivo/react/separator'

The props of Separator, listed above.

SeparatorState type

import type { SeparatorState } from '@nizivo/react/separator'

The render state of Separator, listed above.

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

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