Divider

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

Open in Storybook

Import

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

Basic Usage

Preview

Code

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

Orientation

Preview

---

Left

Right

Code

{/* 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

Preview

---

border

---

border-muted (default)

---

primary

---

accent

---

success

---

warning

---

error

---

info

Code

<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

Preview

---

1px (default)

---

2px

---

3px

---

4px

Code

<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

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"	Divider orientation
color	"border" | "border-muted" | "primary" | "accent" | "success" | "warning" | "error" | "info"	"border-muted"	Divider color
thickness	1 | 2 | 3 | 4	1	Thickness in pixels
as	ElementType	"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";