Skip to main content

Divider

Component that separates content in a list or section.

Import

import { Divider } from '@vortexlabs/vortex';
import type { DividerProps } from '@vortexlabs/vortex';

Display

<Divider />

Other links

Storybook
<Divider
  contentPosition="center"
  vertical={false}
  inset="0px"
>
  Label
</Divider>

Features

  • Separates content vertically or horizontally.
  • Supports positioning content at the start, center, or end of the divider.
  • Can be used relatively within a parent container.
  • Customizable via className and attributes props.
  • Accessible with proper ARIA attributes.

Position

Divider can be positioned vertically or horizontally.

<Stack gap={3} direction="row" align="stretch">
  <Placeholder borderColor="default" width={10} />
      <Divider vertical />
  <Placeholder borderColor="default" width={10} />
</Stack>

<Stack gap={3} direction="column">
  <Placeholder borderColor="default" />
      <Divider />
  <Placeholder borderColor="default" />
</Stack>

Content Position

Divider can contain content positioned at start, center, or end. The default position is center.

<Divider contentPosition="center">
  Label
</Divider>

<Divider contentPosition="start">Label</Divider>

<Divider contentPosition="end">
  Label
</Divider>

Inset

Divider inset from the container edges. Applies left/right spacing when horizontal and top/bottom spacing when vertical.

<Stack width="100px" backgroundColor="success-subtlest" paddingBlock={4}>
      <Divider inset="16px" />
</Stack>

<Stack
  	direction="row"
  	align="stretch"
  	width="36px"
  	height="100px"
  	backgroundColor="success-subtlest"
  	paddingInline={4}
  	gap={2}
  >
	<Divider vertical inset="16px" />
</Stack>

Responsive Vertical

The vertical prop supports responsive values, allowing different orientations at different breakpoints.

<Stack gap={3} direction={{ xs: "column", md: "row" }} align="stretch">
  <Placeholder borderColor='default' />
      <Divider vertical={{ xs: false, md: true }}>Label</Divider>
  <Placeholder borderColor='default' />
</Stack>

Accessibility

Divider component includes necessary ARIA attributes to enhance accessibility for users.

Description
Uses role="separator" to indicate it is a non-interactive element that separates and distinguishes sections of content