Divider

Importing

import { Divider } from '@customerio/pluma-components/react';

Usage

<Divider />

Props

The Divider component accepts all the props of a Box component, plus:

direction

Controls the orientation of the divider.

• Type: 'horizontal' | 'vertical'
• Default: 'horizontal'

<Box display="flex" flexDirection="column" gap="200" style={{ height: '200px', width: '200px' }}>
  <Divider direction="horizontal" />
  <Divider direction="vertical" />
</Box>

Note: Vertical dividers only work in flex containers. If you need to use a vertical divider outside of a flex container, set the height with h="full".

Label

Optional text to display in the center of the divider. When provided, the divider becomes a labeled divider with the text centered between two divider lines.

<Box display="flex" flexDirection="column" gap="200" style={{ width: '300px' }}>
  <Divider />
  <Divider label="OR" />
  <Divider label="Continue with" />
</Box>

Box Props

The Divider component also accepts all the props of a Box component.

<Divider my="400" />