Ariakit

Separator

Distinguish sections of content or groups of items. This abstract component is based on the WAI-ARIA Separator Role.

Separator

index.tsx
import { Separator } from "@ariakit/solid";
import { separator } from "@ariakit/ui/styles/separator";

export default function Example() {
  return (
    <Separator
      orientation="horizontal"
      {...separator.html({ $line: "solid", $gap: 0 })}
    />
  );
}

Separator

Renders a separator element.

<Separator orientation="horizontal" />

Optional Props

orientation

"horizontal" | "vertical" | undefined

Default: "horizontal"

The orientation of the separator.

render

RenderValue<JSX.HTMLAttributes<any>>

Allows the component to be rendered as a different HTML element or Solid component. The value can be an As component instance or a function that takes in the original component props and gives back a Solid component instance with the props merged.

Check out the Composition guide for more details.

Test

Test