XDS — Design System

XDSDivider@xds/core · Divider

Preview coming soon

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.

Best practices

Guidance	Practices
Do	Use subtle dividers between related content sections and strong dividers for high-contrast boundaries.
Do	Add a label to the divider when sections need a visible category heading.
Don't	Overuse dividers — rely on spacing and layout to separate content when possible.

Import

ts
import {XDSDivider} from '@xds/core/Divider'

Props

Prop	Type	Description
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={{}}.

Examples

Common configurations, variations, and states.

Divider — Full BleedDivider that extends past container padding to span the full width. Use inside cards or panels when you want a clean edge-to-edge separation, like between an order summary and total.

tsx
'use client';
import {XDSDivider} from '@xds/core/Divider';
import {XDSCard} from '@xds/core/Card';
import {XDSSection} from '@xds/core/Section';
import {XDSVStack, XDSHStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
export default function DividerFullBleed() {
  return (
    <XDSSection variant="wash">
      <XDSCard>
        <XDSVStack gap={3}>
          <XDSText type="label">Order Summary</XDSText>
          <XDSHStack hAlign="between">
            <XDSText type="body">3 items</XDSText>
            <XDSText type="body">$127.00</XDSText>
          </XDSHStack>
          <XDSDivider isFullBleed />
          <XDSHStack hAlign="between">
            <XDSText type="body">Shipping</XDSText>
            <XDSText type="body">$7.99</XDSText>
          </XDSHStack>
          <XDSHStack hAlign="between">
            <XDSText type="body">Tax</XDSText>
            <XDSText type="body">$10.16</XDSText>
          </XDSHStack>
          <XDSDivider isFullBleed />
          <XDSHStack hAlign="between">
            <XDSText type="label">Total</XDSText>
            <XDSText type="label">$145.15</XDSText>
          </XDSHStack>
        </XDSVStack>
      </XDSCard>
    </XDSSection>
  );
}

Divider — VariantsSubtle, labeled, and strong dividers in a single card. Use subtle between related sections, labeled for alternatives like

tsx
'use client';
import {XDSDivider} from '@xds/core/Divider';
import {XDSCard} from '@xds/core/Card';
import {XDSSection} from '@xds/core/Section';
import {XDSVStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
export default function DividerVariants() {
  return (
    <XDSSection variant="wash">
      <XDSCard>
        <XDSVStack gap={3}>
          <XDSVStack gap={1}>
            <XDSText type="label">Sign in with email</XDSText>
            <XDSText type="body">
              Enter your email and password to access your account.
            </XDSText>
          </XDSVStack>
          <XDSDivider label="or" />
          <XDSVStack gap={1}>
            <XDSText type="label">Sign in with SSO</XDSText>
            <XDSText type="body">
              Use your company credentials to sign in automatically.
            </XDSText>
          </XDSVStack>
          <XDSDivider variant="strong" />
          <XDSText type="supporting" color="secondary">
            By signing in, you agree to our Terms of Service and Privacy Policy.
          </XDSText>
        </XDSVStack>
      </XDSCard>
    </XDSSection>
  );
}

Divider — VerticalVertical dividers separating side-by-side metrics. Use between stat cards, toolbar groups, or any horizontal layout where you need a visual boundary between sections.

tsx
'use client';
import {XDSDivider} from '@xds/core/Divider';
import {XDSCard} from '@xds/core/Card';
import {XDSSection} from '@xds/core/Section';
import {XDSHStack, XDSVStack} from '@xds/core/Layout';
import {XDSText} from '@xds/core/Text';
export default function DividerVertical() {
  return (
    <XDSSection variant="wash">
      <XDSCard>
        <XDSHStack gap={4}>
          <XDSVStack gap={1}>
            <XDSText type="label">Revenue</XDSText>
            <XDSText type="label">$24,500</XDSText>
            <XDSText type="supporting" color="secondary">
              +12% vs last month
            </XDSText>
          </XDSVStack>
          <XDSDivider orientation="vertical" />
          <XDSVStack gap={1}>
            <XDSText type="label">Users</XDSText>
            <XDSText type="label">1,240</XDSText>
            <XDSText type="supporting" color="secondary">
              +8% vs last month
            </XDSText>
          </XDSVStack>
          <XDSDivider orientation="vertical" />
          <XDSVStack gap={1}>
            <XDSText type="label">Conversion</XDSText>
            <XDSText type="label">3.2%</XDSText>
            <XDSText type="supporting" color="secondary">
              -0.5% vs last month
            </XDSText>
          </XDSVStack>
        </XDSHStack>
      </XDSCard>
    </XDSSection>
  );
}

Showcase source

tsx
'use client';
import {XDSDivider} from '@xds/core/Divider';
import {XDSStack} from '@xds/core/Layout';
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
  root: {
    width: 500,
  },
});
export default function DividerShowcase() {
  return (
    <XDSStack direction="vertical" gap={4} xstyle={styles.root}>
      <XDSDivider variant="subtle" />
      <XDSDivider variant="strong" />
      <XDSDivider label="or" />
    </XDSStack>
  );
}