For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/separator.md.

Separator

A 1px rule for the places where whitespace alone does not show that one group has ended — reach for Stack gaps first, because a drawn line is a statement. Most families ship their own (DropdownMenuSeparator, SelectSeparator, FieldSeparator, NavRailSeparator and the rest) already carrying that context’s defaults; the raw primitive is for generic content. It is decorative by default, so set decorative={false} only when the line marks a boundary a screen-reader user should hear.

Source · Storybook

Usage

import { Heading } from '@wallarm-org/design-system/Heading';
import { Separator } from '@wallarm-org/design-system/Separator';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { Text } from '@wallarm-org/design-system/Text';

Props

PropTypeDefaultDescription
titlestring | undefined
defaultCheckedboolean | undefined
defaultValuestring | number | readonly string[] | undefined
autoFocusboolean | undefined
idstring | undefined
tabIndexnumber | undefined
relstring | undefined
onChangeChangeEventHandler<T, Element> | undefined
orientation{ horizontal: string; vertical: string; }horizontal
spacingcomplex
data-testidstring | undefined
decorativeboolean | undefinedtrue