A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.
Preview loads on approachPreview loads on approach
Exact source · divider-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Divider} from '@astryxdesign/core/Divider';
import {Stack} from '@astryxdesign/core/Layout';
export default function DividerShowcase() {
return (
<Stack direction="vertical" gap={4} style={{width: 500}}>
<Divider variant="subtle" />
<Divider variant="strong" />
<Divider label="or" />
</Stack>
);
}
Usage
A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.
Use subtle dividers between related content sections and strong dividers for high-contrast boundaries.
Add a label to the divider when sections need a visible category heading.
Overuse dividers; rely on spacing and layout to separate content when possible.
Typed props
Prop
Type and behavior
orientation
'horizontal' | 'vertical' · default 'horizontal'
Orientation of the divider.
label
ReactNode
Optional label centered on the divider.
variant
'subtle' | 'strong' · default 'subtle'
Visual weight of the divider line.
isFullBleed
boolean · default false
Extend the divider to container edges with negative margins.
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.
Anatomy
Divider group · required
Separator group that arranges one or two rules around an optional label.
Rule · required
Painted line segment; a second segment renders when a label is present.
Label · optional
Optional content displayed between two rule segments.
