Skip to main content

Divider

Divider is a separator that splits content into groups, such as sections of a list or items in a menu.

Import

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

Other links

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

Features

  • Supports horizontal and vertical separators with responsive orientation.
  • Can contain text at the start, center, or end of horizontal dividers.
  • Supports insets from the container edges.
  • Can position the separator relative to its parent.
Reference Links
WAI-ARIA separator role

Orientation

Divider is horizontal by default. Set vertical to separate items in a row.

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

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

Pass a breakpoint object to vertical to switch orientation across breakpoints.

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

Content Position

Pass children to add a label. contentPosition places it at the start, center, or end; the default is center.

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

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

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

Inset

Use inset to pull the line in from the container edges: left and right when horizontal, top and bottom 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>

Accessibility

Description
Renders role="separator" with aria-orientation. Responsive dividers omit aria-orientation.