VerticalDivider

Surfaces & Layout

VerticalDivider

Vertical rule for toolbars, Appbar, and dense layouts.

Usage

Separate inline controls or segments inside horizontal containers.

Highlights

• Height + inset controls
• Matches HorizontalDivider tokens

When to use it

• Appbar needs to split primary and secondary actions.
• You have inline filters that require grouping.

Related components

HorizontalDividerAppbar

Examples

Default

Preview (Web)

import { StyleSheet, View } from 'react-native';
import { Text } from 'react-native-molecules/components/Text';
import { VerticalDivider } from 'react-native-molecules/components/VerticalDivider';

const styles = StyleSheet.create({
  container: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
  },
});

export default function Example() {
  return (
      <View style={styles.container}>
          <Text>Left</Text>
          <VerticalDivider bold spacing={10} />
          <Text>Right</Text>
      </View>
  );
}

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

Defined in react-native-molecules/components/VerticalDivider