Separator is a visual divider used to separate content sections.

Features:

- Supports horizontal (default) and vertical orientations - Accessible to screen readers with proper ARIA attributes - Decorative mode available for purely visual separators - Minimal styling that integrates with design system

Usage:

- Use between content sections to create visual hierarchy - Horizontal separators work well between stacked content - Vertical separators work well between inline or flex items - Use `decorative` prop when separator is purely visual

Accessibility:

- Uses `role="separator"` for semantic meaning - Includes `aria-orientation` for screen readers - Decorative separators use `role="none"` to be ignored by assistive technology Basic: Default horizontal separator.

The most common use case - a simple horizontal line that divides content vertically.

Horizontal: Demonstrates horizontal separator usage in a list context.

Horizontal separators are useful for dividing stacked items like navigation links, menu items, or content sections.

Vertical: Demonstrates vertical separator in a navigation bar.

Vertical separators are ideal for dividing inline content like navigation links, toolbar buttons, or horizontal lists.

Decorative: Separator that is ignored by screen readers.

Use the `decorative` prop when the separator is purely visual and doesn't convey any semantic meaning to users.

CustomStyling: Demonstrates custom styling options.

The separator accepts className for custom styling. You can modify thickness, color, margins, and other CSS properties.

WithChildren: Separator with content in the middle.

Use children to insert content (text, icons) between the separator lines. Common patterns include "OR" dividers and section labels.

InCard: Separator used within a card component.

A common pattern is using separators to divide card sections like header, body, and footer.