Back to Onyx

Separator

web/lib/opal/src/components/separator/README.md

4.0.0-cloud.21.4 KB
Original Source

Separator

Import: import { Separator } from "@opal/components";

A visual divider that separates content horizontally or vertically. Built on Radix Separator primitives.

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Direction of the line
decorativebooleantrueWhen false, the separator is announced by screen readers
noPaddingbooleanfalseRemoves the default padding around the line
paddingXRemnumberCustom horizontal padding in rem (overrides default)
paddingYRemnumberCustom vertical padding in rem (overrides default)
classNamestringAdditional classes for the wrapper

Usage

tsx
import { Separator } from "@opal/components";

// Horizontal (default)
<Separator />

// Vertical
<Separator orientation="vertical" />

// Custom padding
<Separator paddingYRem={0.5} />

// No padding
<Separator noPadding />