Separator

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

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <HStack gap={12} wrap>
    <span>Docs</span><Separator orientation="vertical" /><span>Components</span><Separator orientation="vertical" /><span>Theming</span>
  </HStack>
  <Separator />
  <Text as="span" tone="muted">Quiet structure without visual noise.</Text>
</VStack>

#Import

import { Divider, HStack, Separator, Text, VStack } 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.