Divider

Divider creates visual separation between content sections. It supports different weights, orientations, and can include a centered label.

Preview

Content above

Content below

Variants

Default

Standard weight divider for most use cases.

Section 1

Section 2

<Divider />

Subtle

Lighter divider for softer separation.

Section 1

Section 2

<Divider variant="subtle" />

Strong

Heavier divider for clear section breaks.

Section 1

Section 2

<Divider variant="strong" />

With Label

Add a centered label to provide context for the separation.

Past Readings

New Reading

<Divider label="or" />

continue with

<Divider label="continue with" />

Spacing

Control the vertical margin around the divider.

No spacing

Small spacing

Medium spacing (default)

Large spacing

End

Spacing	Value	Usage
`none`	0	Tight layouts
`sm`	8px	Compact lists
`md`	16px	Default
`lg`	24px	Major sections

Vertical Orientation

Use vertical dividers to separate inline content.

Heaven

Earth

Thunder

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <Text>Heaven</Text>
  <Divider orientation="vertical" spacing="md" />
  <Text>Earth</Text>
  <Divider orientation="vertical" spacing="md" />
  <Text>Thunder</Text>
</View>

API Reference

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'subtle' \| 'strong'`	`'default'`	Visual weight
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction
`label`	`string`	-	Centered label text
`spacing`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Margin around divider
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { Divider, Card, Button } from '@synchronicity/react-native';
import { View, Text } from 'react-native';

function LoginOptions() {
  return (
    <Card>
      <Button kind="primary" accessibilityLabel="Sign in with email">
        Continue with Email
      </Button>

      <Divider label="or" spacing="lg" />

      <Button kind="secondary" accessibilityLabel="Sign in with Apple">
        Continue with Apple
      </Button>

      <Divider spacing="lg" />

      <Text style={styles.footer}>
        By continuing, you agree to our Terms
      </Text>
    </Card>
  );
}