nili/ui
enfaartr
All components

ContentDivider

Overview
12 exports6 variant axes10 props3 files
import { ContentDivider, ContentDividerAlign, ContentDividerSpacing, ContentDividerType } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Rules

With no children it is a plain separator. spacing sets the vertical room around it; type picks one of the named Figma presets.

spacing=none

Above

Below

spacing=sm

Above

Below

spacing=md

Above

Below

spacing=lg

Above

Below

import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider type="line" />
      <ContentDivider type="line-spacing" />

      {/* the same thing, spelled as the axis */}
      <ContentDivider spacing="none" />
      <ContentDivider spacing="md" />
    </>
  )
}

With text

A string child renders as the label. text-and-line centres it between two rules; text puts it alone at the start; solid-text gives it the filled chip.

text-and-line
OR
text
solid-text
import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider type="text-and-line">{t('text.or')}</ContentDivider>
      <ContentDivider type="text">{t('text.today')}</ContentDivider>
      <ContentDivider type="solid-text">
              {t('text.newMessages')}
            </ContentDivider>
    </>
  )
}

Alignment

align decides where the content sits on the rule. Logical, so start follows reading direction.

start
center
end
import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <>
      <ContentDivider align="start" spacing="sm">Start</ContentDivider>
      <ContentDivider align="center" spacing="sm">Center</ContentDivider>
      <ContentDivider align="end" spacing="sm">End</ContentDivider>
    </>
  )
}

With controls

The four button presets differ only in what you pass as children — a compact button, a group of them, a text button. Same geometry, named for the case you are building.

icon-button
icon-button-group
text-button
import { ContentDivider, Button, CompactButton, Icon } from "@nili/ui"
import { RiAddLine, RiMore2Fill } from "@remixicon/react"

export function Example() {
  return (
    <>
      <ContentDivider type="icon-button">
        <CompactButton
                  appearance="stroke"
                  fullRadius
                  aria-label={t('controls.add')}
                >
          <Icon icon={RiAddLine} />
        </CompactButton>
      </ContentDivider>

      <ContentDivider type="text-button">
        <Button size="2xs" appearance="stroke">Show more</Button>
      </ContentDivider>
    </>
  )
}

Vertical

A vertical orientation separates items in a row — a toolbar, a set of stats. It stretches to the height of its container.

12 open4 closed2 draft
import { ContentDivider } from "@nili/ui"

export function Example() {
  return (
    <div className="flex h-10 items-center gap-3">
      <span>{t('vertical.open')}</span>
      <ContentDivider orientation="vertical" />
      <span>{t('vertical.closed')}</span>
      <ContentDivider orientation="vertical" />
      <span>{t('vertical.draft')}</span>
    </div>
  )
}