Separator Component

A component for visually separating content with a line.

My Movie

A movie made by me

import { Flex, Panel, Separator, Text } from "@locus-ui/components";import styles from "./styles.css";
<Panel px="4" py="2" variant="outlined">  <Flex gap="2" direction="column">    <Text>My Movie</Text>    <Separator />    <Text>A movie made by me</Text>  </Flex></Panel>

View Source

Anatomy

Import the component:

Anatomy

import { Separator } from "@locus-ui/components";
<Separator />

Examples

Variants

The variant prop controls the line style: solid (default), dashed, or dotted.

Solid

Dashed

Dotted

variants.tsx

import { Separator } from "@locus-ui/components";
const variants = ["solid", "dashed", "dotted"];
return variants.map((variant) => (  <Flex key={variant} gap="4" align="center" className="flex-1">    <Text>{variant.charAt(0).toUpperCase() + variant.slice(1)}</Text>    <Separator variant={variant} />  </Flex>));

Directions

The direction prop controls the orientation: horizontal (default) or vertical.

Top Text

Bottom Text

Left Text

Right Text

directions.tsx

import { Flex, Separator, Text } from "@locus-ui/components";
<Flex direction="column" gap="2">  <Text>Top Text</Text>  <Separator direction="horizontal" />  <Text>Bottom Text</Text></Flex>
<Flex gap="2">  <Text>Left Text</Text>  <Separator direction="vertical" />  <Text>Right Text</Text>