XDS — Design System

Divider@xds/core · XDSDivider v0.0.13

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.

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

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.

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>
  );
}

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.

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

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.

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> ); }

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> ); }

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> ); }

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> ); }