Chapter 39: Separator

Core Idea

A single-part decorative divider (role="separator") with an orientation prop — the simplest component in the library alongside Avatar.

Key Concepts

• Anatomy: <Separator />, one part, no children needed.
• orientation: horizontal/vertical, reflected as data-orientation for styling (border direction, margin).

Reference Tables

Part	Notable props	Notable data attributes
Separator	orientation	data-orientation

Key Takeaways

1. Use this instead of a raw styled <hr>/<div> whenever the divider needs correct role="separator" semantics, e.g. inside a Menu or Toolbar where multiple part-specific Separators already exist (Menu.Separator, Toolbar's own) — those are re-exports/wrappers of this same concept in context.

Connects To

• ch027 (Menu), ch046 (Toolbar), ch019 (Combobox): components with their own contextual Separator sub-part sharing this same role/orientation convention.