Separator

Separator defines how EnterUI handles a quiet divider for visual structure, including default structure, accessible states, and token-driven styling.

#Default usage

<div className="docs-preview-stack">
  <div className="docs-preview-row">
    <span>Docs</span><Separator orientation="vertical" /><span>Components</span><Separator orientation="vertical" /><span>Theming</span>
  </div>
  <Separator />
  <span className="docs-preview-muted">Quiet structure without visual noise.</span>
</div>

#Import

import { Divider, Separator } from "@froggdesign/enter-ui-react";

#Accessibility

Separator renders a semantic separator role. Use decorative when the line is purely visual.

#API

• orientation: horizontal or vertical.
• decorative removes separator semantics.
• Divider is an alias for teams that prefer system UI naming.
• Supports native hr props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.