Content divider

01Preview

Change the controls to try every type. The preview renders the real component and the code updates with it.

import { Divider } from '@nuton/ui'

<Divider type="text-line">or</Divider>

02Installation

1. Add the packages

pnpm add @nuton/ui @nuton/tokens

npm install @nuton/ui @nuton/tokens

yarn add @nuton/ui @nuton/tokens

Peer dependencies: react and react-dom 18 or later. Add @remixicon/react only if you put icon buttons in an action divider (D1).

2. Load tokens and component styles once

// app/layout.tsx (or your app's entry file)
import '@nuton/tokens/tokens.css' // --nu-* design tokens
import '@nuton/ui/styles.css'     // component styles (uses the tokens)

Divider has no state and works in server components.

03Usage

import { Divider } from '@nuton/ui'

export function LessonNotes() {
  return (
    <article>
      <p>Plants turn light into chemical energy in their chloroplasts.</p>
      <Divider />
      <p>Next, we look at how the Calvin cycle uses that energy.</p>
    </article>
  )
}

• The default is a 1px line in Stroke/Soft-200 that fills the width of its container.
• Pick the type by what the divider carries: nothing (line, line-spacing), a label (text-line, text, solid-text, section) or controls (action).
• Write labels in sentence case, such as “or” or “Today”. The uppercase types transform them, so screen readers still read a word, not letters.
• Dividers are decorative by default. Set decorative={false} only for a real thematic break that people should hear.
• Spacing around the divider comes from the parent layout (a gap or margin), not from the divider.

04Variants and sizes

One type prop covers Figma's ten Type values. Every line is 1px Stroke/Soft-200, and the four button types share one action type that takes your own controls.

Line and line spacing

<Divider />                   // line: 1px
<Divider type="line-spacing" /> // 1px line in a 4px band

Labelled types

<Divider type="text-line">or</Divider>
<Divider type="text">Earlier this week</Divider>
<Divider type="solid-text">Today</Divider>
<Divider type="section">Week 2 · Cell biology</Divider>

Action

Figma's Icon Button, Icon Button Group, Text Button and Text Button Group become one action type: a line, your controls, a line.

<Divider type="action">
  <Button size="sm" appearance="stroke" leadingIcon={<RiAddLine />}>Add section</Button>
</Divider>

<Divider type="action">
  <Button size="sm" appearance="stroke" iconOnly aria-label="Add lesson"><RiAddLine /></Button>
</Divider>

<Divider type="action">
  <ButtonGroup aria-label="Add content" size="xs">
    <ButtonGroupItem leadingIcon={<RiAddLine />}>Lesson</ButtonGroupItem>
    <ButtonGroupItem leadingIcon={<RiUpload2Line />}>Upload</ButtonGroupItem>
  </ButtonGroup>
</Divider>

Figma draws 32px and 28px controls. Use Button sm (36) or Button group sizes; the divider centres whatever you pass.

Orientation

<div className="toolbar"> {/* any flex row; the divider stretches to its height */}
  <Button size="sm" appearance="ghost" iconOnly aria-label="Bold"><RiBold /></Button>
  <Button size="sm" appearance="ghost" iconOnly aria-label="Italic"><RiItalic /></Button>
  <Button size="sm" appearance="ghost" iconOnly aria-label="Underline"><RiUnderline /></Button>
  <Divider orientation="vertical" />
  <Button size="sm" appearance="ghost" iconOnly aria-label="Add link"><RiLinkM /></Button>
</div>

vertical applies to line, line-spacing, text-line and action; the other types stay horizontal. It stretches to the height of a flex row, or set a height on the divider. Figma has no vertical variants; they were added for the brief (C39).

Dimensions

Values in px, from the component CSS, which follows Figma's geometry. Label text is Text/Sub-600 in every type. Vertical lines are 1px wide with a minimum of 8px each side of a label. The section band's narrow-screen inset is a code addition, pending a decision.

05Composition examples

Two ways to add notes

A text-line divider separates two alternatives in the create-lesson flow.

<div className="stack">
  <Button appearance="stroke" leadingIcon={<RiUpload2Line />}>Upload notes</Button>
  <Divider type="text-line">or</Divider>
  <Field label="Paste a link" hint="A YouTube video, article or PDF.">
    <Input type="url" size="sm" />
  </Field>
</div>

Lessons grouped by week

A section band titles a group. When the label is a real heading for navigation, put the heading inside the divider so it appears in the page outline.

<Divider type="section">Week 1 · What is a cell?</Divider>
<ul aria-label="Week 1 lessons">
  <li>Cell membranes</li>
  <li>Organelles</li>
</ul>
<Divider type="section">Week 2 · Cell biology</Divider>
<ul aria-label="Week 2 lessons">
  <li>Photosynthesis basics</li>
</ul>

<Divider type="section">
  <h3>Week 2 · Cell biology</h3> {/* reset the heading's margins and type in your styles */}
</Divider>

Chat history by day

<Divider type="solid-text">Today</Divider>
<ul aria-label="Today's chats">…</ul>
<Divider type="solid-text">Yesterday</Divider>
<ul aria-label="Yesterday's chats">…</ul>

Load more lessons

An action divider holds a control between content. After loading, focus moves to the first new lesson.

<ul ref={listRef} aria-label="Lessons in Biology 101">{/* lessons */}</ul>
{hasMore ? (
  <Divider type="action">
    <Button size="sm" appearance="stroke" trailingIcon={<RiArrowDownSLine />} onClick={showMore}>
      Show 2 more lessons
    </Button>
  </Divider>
) : (
  <Divider type="text">All 4 lessons shown</Divider>
)}

A thematic break people should hear

Most dividers are visual. When a break carries meaning, such as the end of the reading before a lesson's quiz, set decorative={false}. Screen readers announce a separator with the label as its name.

<p>That covers the light reactions. Check what you remember.</p>
<Divider type="text-line" decorative={false}>Quiz</Divider>
<p>1. Where in the cell does photosynthesis happen?</p>

06API reference

Props

Types exported: DividerProps, DividerType and DividerOrientation.

Styling hooks

The component renders .nu-divider with data-type and data-orientation, plus .nu-divider__line and .nu-divider__label inside. Use props rather than styling these. The supported override points are these component properties:

Accessibility

You must: give a non-decorative line an aria-label; use a real heading, not a divider label, when the text is a section heading; keep labels short and in sentence case; label icon-only buttons in an action divider.

Figma mapping

07Guidelines and related components

Do and don't

Common mistakes

• Typing labels in capitals (“OR”), so some screen readers may spell them out. Write “or”; the type uppercases it.
• Placing a horizontal divider directly in a flex row, where it shrinks to zero width. Give it a full-width parent.
• Setting decorative={false} on every divider, which fills the reading order with separators.
• Restyling the label to Soft-400 to match Figma; that fails contrast (C39).

Related components

• ButtonControls inside an action divider.
• Button groupGrouped controls inside an action divider.
• Dropdown menuHas its own separator for menu items.
• SpacingSpace between groups, often instead of a line.
• ColourStroke and text roles the divider uses.