HorizontalDivider

Surfaces & Layout

HorizontalDivider

Horizontal rule with Material tokens for spacing and color.

Usage

Separate settings sections or card content.

Highlights

• Inset and padded variants
• Supports label slot

When to use it

• Visually divide stacked content.
• Need responsive spacing that aligns to tokens.

Related components

VerticalDividerSurface

Examples

Default

Preview (Web)

import { View } from 'react-native';
import { HorizontalDivider } from 'react-native-molecules/components/HorizontalDivider';
import { Text } from 'react-native-molecules/components/Text';

export default function Example() {
  return (
      <View>
          <Text>Above</Text>
          <HorizontalDivider spacing={10} />
          <Text>Below</Text>
      </View>
  );
}

Prop	Type	Default	Description
style	StyleProp<ViewStyle>	—	—
leftInset	number | undefined	—	—
rightInset	number | undefined	—	—
bold	boolean | undefined	—	—
spacing	number | undefined	—	—

Defined in react-native-molecules/components/HorizontalDivider