Server Component · 0 KB client JS

Separator

A dividing line between content: horizontal or vertical, with semantic role built in.

Astralis UI

A dividing line with the separator role built in: horizontal by default, one prop to go vertical.

import { Separator, Text, VStack } from "astralis-ui";

export function SeparatorDemo() {
  return (
    <VStack gap="3" alignItems="stretch" w="full" maxW="sm">
      <Text size="sm" weight="semibold">Astralis UI</Text>
      <Separator />
      <Text size="sm" color="muted">
        A dividing line with the separator role built in: horizontal by
        default, one prop to go vertical.
      </Text>
    </VStack>
  );
}

orientation

variant

import { Separator } from "astralis-ui";

<Separator />

Import#

import { Separator } from "astralis-ui";

Vertical#

orientation="vertical" flips it; it stretches to its container's cross axis, so give the row a height (or let alignment do it).

Docs

Components

Changelog

import { Separator, Text, HStack } from "astralis-ui";

export function SeparatorVertical() {
  return (
    <HStack gap="4" h="6">
      <Text size="sm">Docs</Text>
      <Separator orientation="vertical" />
      <Text size="sm">Components</Text>
      <Separator orientation="vertical" />
      <Text size="sm">Changelog</Text>
    </HStack>
  );
}

Variants#

Line style via variant; color and thickness come from the Box border props.

solid

dashed

dotted

colored via borderColor

import { Separator, Text, VStack } from "astralis-ui";

export function SeparatorVariants() {
  return (
    <VStack gap="5" alignItems="stretch" w="full" maxW="sm">
      <VStack gap="1" alignItems="stretch">
        <Text as="span" size="xs" color="muted">solid</Text>
        <Separator variant="solid" />
      </VStack>
      <VStack gap="1" alignItems="stretch">
        <Text as="span" size="xs" color="muted">dashed</Text>
        <Separator variant="dashed" />
      </VStack>
      <VStack gap="1" alignItems="stretch">
        <Text as="span" size="xs" color="muted">dotted</Text>
        <Separator variant="dotted" />
      </VStack>
      <VStack gap="1" alignItems="stretch">
        <Text as="span" size="xs" color="muted">colored via borderColor</Text>
        <Separator borderColor="brand" border="moderate" />
      </VStack>
    </VStack>
  );
}

Props#

Separator extends Box. Use borderColor / border to restyle the line.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Line direction; also sets `aria-orientation`.
`variant`	`"solid" \| "dashed" \| "dotted"`	`"solid"`	Line style.

Accessibility#

Renders with role="separator" and the matching aria-orientation, so screen readers announce the division without any extra work.