Content & statusBrick 0.1.2

Divider

Divider draws a low-emphasis structural line between adjacent content groups. It uses Atom for decorative or semantic separator behavior and adds finished line, inset, label, and appearance recipes.

Live example

Built from the published package

Interactive

Current workspace

Archived workspace

Choose with confidence

Know when Divider is the right part

Use it when

Use Divider for an explicit horizontal thematic break, a vertical boundary between peer groups, or a labeled visual break such as “or continue with”.

Choose another path when

Prefer spacing or Surface contrast when they already communicate grouping. Do not use Divider for component edges, focus, validation, selection, measurement guides, headings, or draggable pane resizing.

Installation and imports

tsx

import { Divider } from "@flowstack-ui/brick";
// or
import { Divider } from "@flowstack-ui/brick/divider";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/divider.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Public exports are Divider, DividerProps, DividerLineProps, DividerLabelProps, DividerComposedProps, DividerElement, DividerOrientation, DividerVariant, DividerThickness, DividerInset, and DividerLabelAlign.

Quick start

tsx

<VStack gap="4">
  <Text>Current workspace</Text>
  <Divider />
  <Text>Archived workspace</Text>
</VStack>

Visual recipes and states

Variant changes only border style; thickness changes only line weight; inset changes only logical extent. Vertical Divider has no invented height: provide context height or use stretch in a row. Divider has no interaction, status, focus, disabled, loading, or motion state.

Examples

Vertical peer-group boundary

tsx

<HStack gap="4">
  <Text>Current</Text>
  <Divider orientation="vertical" stretch />
  <Text>Archived</Text>
</HStack>

Named semantic break

tsx

<Divider decorative={false} aria-label="Archived results" />

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Prop	Values	Default
`orientation`	`horizontal`, `vertical`	`horizontal`
`decorative`	`boolean`	`true`
`variant`	`solid`, `dashed`, `dotted`	`solid`
`thickness`	`subtle`, `regular`, `strong`	`subtle`
`inset`	`none`, `start`, `both`	`none`
`labelAlign`	`start`, `center`, `end`	`center`
`stretch`	`boolean`	`false`
`slot`	`string`	`divider`

Labels are horizontal only. asChild is a distinct composed-root mode and cannot also use labelAlign. Native attributes, render, events, className, style, and refs pass through.

Shared responsibility

Accessibility

The default is decorative with role="none". Set decorative={false} for a meaningful static separator; vertical semantic Divider receives aria-orientation="vertical" from Atom. Provide aria-label or aria-labelledby when a semantic separator needs a name. Divider is never a focusable splitter.

Responsive behavior

Divider follows its parent, uses logical properties, mirrors start/end geometry in RTL, and contains wrapping labels. It has no responsive prop API.

Stable visual contract

Styling and tokens

Customization

tsx

<Divider
  style={{
    "--brick-divider-color": "rebeccapurple",
    "--brick-divider-inset": "2rem",
  }}
>
  custom boundary
</Divider>

Tokens and CSS hooks

Hooks include .brick-divider, .brick-divider__line, .brick-divider__label, anatomy data-slot values, and all documented recipe data attributes.

Root recipe hooks are data-orientation, data-variant, data-thickness, data-inset, optional data-label-align, and optional data-stretch.

Public variables:

--brick-divider-color
--brick-divider-thickness
--brick-divider-style
--brick-divider-inset
--brick-divider-label-gap
--brick-divider-label-short-segment

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground