Skip to main content

Divider

Divider is a visual separator for content sections. It supports horizontal and vertical orientations with customizable colors.

Import​

import { Divider } from "@tosui/react";

Basic Usage​

<VStack gap={4}>
  <Box>Content above</Box>
  <Divider />
  <Box>Content below</Box>
</VStack>

Orientation​

{/* Horizontal (default) */}
<Divider orientation="horizontal" />

{/* Vertical - needs height context */}
<HStack gap={4} h="60px" align="center">
  <Box>Left</Box>
  <Divider orientation="vertical" />
  <Box>Right</Box>
</HStack>

Colors​

<VStack gap={4}>
  <Divider color="border" />
  <Divider color="border-muted" />
  <Divider color="primary" />
  <Divider color="accent" />
  <Divider color="success" />
  <Divider color="warning" />
  <Divider color="error" />
  <Divider color="info" />
</VStack>

Thickness​

<VStack gap={4}>
  <Divider thickness={1} />
  <Divider thickness={2} />
  <Divider thickness={3} />
  <Divider thickness={4} />
</VStack>

Common Patterns​

Section Separator​

<VStack gap={6}>
  <Box>
    <Heading>Section 1</Heading>
    <Text>Content for section 1...</Text>
  </Box>
  <Divider />
  <Box>
    <Heading>Section 2</Heading>
    <Text>Content for section 2...</Text>
  </Box>
</VStack>

Vertical in Navigation​

<HStack gap={4} align="center">
  <Link href="#">Home</Link>
  <Divider orientation="vertical" h="20px" />
  <Link href="#">About</Link>
  <Divider orientation="vertical" h="20px" />
  <Link href="#">Contact</Link>
</HStack>

Props Reference​

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Divider orientation
color"border" | "border-muted" | "primary" | "accent" | "success" | "warning" | "error" | "info""border-muted"Divider color
thickness1 | 2 | 3 | 41Thickness in pixels
asElementType"hr" (horizontal) / "div" (vertical)HTML element to render

Accessibility​

Divider includes proper ARIA attributes:

  • role="separator"
  • aria-orientation matching the orientation prop

TypeScript​

import { Divider, type DividerColor, type DividerProps, type DividerOwnProps } from "@tosui/react";