Density

Separator

Separator divides related content with the standard Density border color.

import { Separator } from "density-base-ui";

export default function SeparatorExample() {
  return <Separator />;
}

Orientation

Use orientation="vertical" to separate items arranged side by side.

BeforeAfter
import { Separator, View } from "density-base-ui";

export default function SeparatorOrientationExample() {
  return (
    <View
      align="stretch"
      orientation="horizontal"
      padding={false}
      style={{ height: "12rem" }}
    >
      <span>Before</span>
      <Separator orientation="vertical" />
      <span>After</span>
    </View>
  );
}