Separator

Horizontal and vertical separator examples.

Package: @solidiom/separator
Version: 0.0.1-next.0
Status: stable

Examples

import * as Separator from "@solidiom/separator"

;<section>
  <p>Section content above the divider.</p>
  <Separator.Root />
  <p>Section content below the divider.</p>
</section>

Variants

Use the orientation prop for vertical separators in side-by-side layouts.

;<div style={{ display: "flex" }}>
  <aside>Sidebar</aside>
  <Separator.Root orientation="vertical" />
  <main>Main content</main>
</div>

Decorative

When the separator is purely visual and carries no structural meaning, set decorative to hide it from assistive technologies.

;<Separator.Root decorative />

Content above the divider.

Content below the divider.

View source

        export function Root(props: RootProps) {
  const orientation = () => props.orientation ?? "horizontal"
  const role = () => (props.decorative ? "none" : "separator")

  return (
    <div
      role={role()}
      aria-orientation={props.decorative ? undefined : orientation()}
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({ scope: "separator", part: "root", orientation: orientation() })}
    />
  )
}