Divider

A flexible divider component for visually separating content, with support for horizontal and vertical orientation, optional labels, custom colors, thickness, spacing, and responsive behavior. Useful for forms, toolbars, lists, and section breaks.

---

Import

import { Divider } from '@odyssee/components';

---

Subcomponents

• Divider.Vertical: Shorthand for <Divider orientation="vertical" />
• Divider.WithText: Shorthand for <Divider label="..." labelPosition="center" />

---

Examples

Basic Horizontal Divider

Code Éditable

Résultat

---

Colors

Code Éditable

Résultat

---

Thickness

Code Éditable

Résultat

---

With Label (Center)

Code Éditable

Résultat

---

With Label (Left & Right)

Code Éditable

Résultat

---

Spacing (with labels)

Code Éditable

Résultat

---

Vertical Divider

Code Éditable

Résultat

---

Colored & Thick Vertical Dividers

Code Éditable

Résultat

---

Responsive Orientation

Code Éditable

Résultat

---

Use Case: Login Form with Social Options

Code Éditable

Résultat

---

Use Case: Section Separator in Article

Code Éditable

Résultat

---

Use Case: Toolbar with Actions

Code Éditable

Résultat

---

Use Case: List Items with Separators

Code Éditable

Résultat

---

Props

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"	Divider direction.
label	string | HTMLElement	—	Optional label to display in the divider (centered by default).
labelPosition	"left" | "center" | "right"	"center"	Label alignment (when label is set).
color	"default" | "gray" | "teal" | "blue" | "red" | "yellow" | "white"	"default"	Divider color.
thickness	1 | 2 | 4 | 8	1	Divider thickness (border width).
spacing	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Vertical spacing (padding) for labeled dividers.
responsiveOrientation	{ sm?: "horizontal" | "vertical", md?: ..., lg?: ... }	—	Responsive orientation overrides for breakpoints.
className	string	—	Additional CSS classes.
id	string	auto-generated	HTML id attribute.
style	string	—	Inline styles.

---

Implementation Notes

• Orientation: Use orientation="vertical" for vertical dividers (e.g., between buttons in a toolbar).
• Labels: The label prop can be a string or custom element. Use labelPosition to align left, center, or right.
• Colors: Choose from several color presets for both light and dark backgrounds.
• Thickness: Use thickness to adjust the border width.
• Spacing: The spacing prop controls vertical padding for labeled dividers.
• Responsive: Use responsiveOrientation to change orientation at breakpoints (e.g., vertical on mobile, horizontal on desktop).
• Subcomponents: Use Divider.Vertical and Divider.WithText for convenience.
• Accessibility: Horizontal dividers use <hr>, vertical and labeled dividers use <div role="separator"> with aria-orientation.

---

Accessibility

• Horizontal dividers use semantic <hr> elements.
• Vertical and labeled dividers use <div role="separator"> and set aria-orientation appropriately.
• Labels are rendered as text or custom content; ensure custom labels are accessible.
• Sufficient color contrast is provided for all color options.

---

Best Practices

• Use Divider to visually separate related content or actions.
• For toolbars, use vertical dividers between groups of buttons.
• For forms or login screens, use labeled dividers to separate alternative actions.
• Use responsiveOrientation for layouts that change direction on different screen sizes.
• Always provide accessible labels for custom content.

---

Related

• Pulse Framework
• Tailwind CSS border utilities
• ARIA separator role

---