Chapter 30: Separator

Core Idea

A minimal visual/semantic divider between content, following the ARIA separator role.

Key Concepts

• orientation (default "horizontal"): the only meaningful visual prop.
• decorative: when true, removes the separator role/semantics — use for purely visual dividers that convey no structural meaning to assistive tech (e.g. a hairline inside a card that isn't grouping distinct content).

Key Takeaways

1. Set decorative whenever the line is purely aesthetic — don't let every visual rule render as an ARIA separator, or you add semantic noise for screen reader users.
2. This is the simplest primitive in the library alongside Aspect Ratio and Label — one part, essentially two props.

Connects To

• Toolbar: uses Separator internally to group related controls.