Cloaked Design SystemPrimitives

Divider

A full-width content separator that renders either a labeled section band or a plain hairline.

Implementation preview

COMPLETE STORYBOOK REFERENCE

Every example. In one place.

Explore every named example, including states, compositions, and theme variants.

5 stories

Section On Page selectedOpen canvas

Example source

packages/design-system/src/components/primitives/Divider/Divider.stories.tsxExport SectionOnPage

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Stories + source JSON ↗

Local specification source status: preview. Implementation preview pending sign-off.

A full-width content separator that renders either a labeled section band or a plain hairline.

Design-owned component contract ↗Version 0.2.0-preview.1 · Implementation preview pending sign-off

Implementation API 1 entry point · source-derived preview

Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.

import { Divider } from '@cloakedinc/design-system';

DividerDividerProps

packages/design-system/src/components/primitives/Divider/Divider.tsx:36

Prop	Type	Presence	Notes
`variant`	`DividerVariant \| undefined`	Optional	`section` renders a labeled band; `line` renders a hairline separator.
`label`	`string \| undefined`	Optional	Label shown inside a section divider.
`surface`	`DividerSurface \| undefined`	Optional	Band treatment. `page` is the cream band (default); `surface` is the white band for in-card grouping. Both are borderless — spacing separates groups.Source default: `'page'`
`className`	`string \| undefined`	Optional
`style`	`React.CSSProperties \| undefined`	Optional
`testId`	`string \| undefined`	Optional	Selector on the divider root; the section label renders inside it with none of its own.

Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.

Complete contract · JSON ↗Guidance and source · Markdown ↗

Overview

A separator between content groups. Pass a label for a titled band, or leave it off for a plain hairline.

Use when

Match surface to the container the divider sits in: page is the cream, borderless band for the scroll-feed background; surface is white with a bottom hairline for grouping rows inside a Card.

Usage by variant

Choice	Use when	Avoid when
`Variant: section`	A labeled band that groups a scroll feed by time or category (Today, Yesterday). Defaults on when `label` is set.	A heading that needs a trailing action — use `SectionHeader`.
`Variant: line`	A plain hairline between rows or blocks when the group needs no title.	Grouping that reads better with a label — use section.

Component specification

$schema

../../../specs/component-spec.schema.json

Parts

Id: separator
Label: Separator
Description: Owns full-width separator semantics and the selected treatment.

Id: section-band
Label: Section band
Description: Provides inset space and a surface behind a section label.

Id: label
Label: Label
Description: Names the following section when the section variant is used.

Id: line
Label: Line
Description: Draws the unlabeled hairline treatment.

Allowed Design Choices

Variants

Section

Label: Section

Line

Label: Line

Sizes

Surfaces

Page

Label: Page
Description: Uses the page background for a section band.

Surface

Label: Surface
Description: Uses the raised surface background for a section band. Borderless — spacing separates groups.

Variants

Id: section
Label: Section
Description: A labeled band for separating larger content groups.
Platforms: ios
android
web

Id: line
Label: Line
Description: An unlabeled hairline between adjacent content.
Platforms: ios
android
web

Sizes

None specified

Measurements

Id: line-thickness
Label: Line thickness
Kind: exact
Token: --cds-border-width-default
Value: 1
Unit: px
Applies To: line

Id: section-horizontal-inset
Label: Section horizontal inset
Kind: exact
Token: --cds-space-20
Value: 20
Unit: px
Applies To: section-band
label

Id: section-top-inset
Label: Section top inset
Kind: exact
Token: --cds-space-32
Value: 32
Unit: px
Applies To: section-band
label

Id: section-bottom-inset
Label: Section bottom inset
Kind: exact
Token: --cds-space-12
Value: 12
Unit: px
Applies To: section-band
label

Layout

Alignment: The separator spans its parent width; section labels align to the leading inset.
Flow: A line consumes one stroke of height; a section band wraps one uppercase label.
Notes: A label automatically selects the section treatment unless a variant is explicit.
The surface choice is page or raised surface and does not create another public variant.

Typography And Color

Typography

Label: Section label
Description: Uses the compact link ramp and uppercase presentation.
Token: --cds-type-link-size

Colors

Label: Hairline
Description: Uses the theme-aware divider role.
Token: --cds-divider

Label: Page band
Description: Uses the page background when separating feed sections.
Token: --cds-bg-page

Label: Surface band
Description: Uses the raised surface background inside a card.
Token: --cds-bg-surface

Label: Section label
Description: Uses primary text emphasis.
Token: --cds-text-primary

States

Id: section-page
Label: Section on page
Description: Shows a borderless labeled band on the page canvas.

Id: section-surface
Label: Section on surface
Description: Shows a labeled raised band with a bottom hairline.

Id: line
Label: Line
Description: Shows only the theme-aware hairline.

Behavior

Label: Variant inference
Description: Resolve to section when a label exists and line when no label exists, unless the caller selects a variant.

Label: Separation only
Description: Do not make the separator interactive or use it as a heading with an action.

Accessibility

Label: Separator semantics
Description: Expose separator role for both the line and section treatments.

Label: Section label
Description: Keep the visible label concise; use a real heading component when document hierarchy is required.

Content Adaptation

Label: Labels
Description: Use short section names that remain readable when transformed to uppercase.

Motion Haptics

Motion

Label: No motion
Description: Divider has no animated state transition.

Haptics

Label: No feedback
Description: Divider is not interactive and does not request haptic feedback.

Platform Differences

None specified

Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1