Divider

Horizontal rule, optionally carrying a short label (“or”, “with your account”). It is a separator for assistive technology, so the label is read as part of the separator’s name rather than as page content.

Import

import { Divider } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/divider.

Usage

<Divider />

Props

Prop	Type	Default	Description
children	ReactNode		Text centered on the rule. Without it the divider is a plain hairline.
classNames	Partial<Record<DividerPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Plain
• Labelled

Source

packages/ui/src/atoms/divider/divider.tsx