> 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.

# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Separator) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/primitives-separator--overview)

```tsx
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';

export const Basic = () => (
  <VStack>
    <Heading>Separator examples</Heading>
    <Text>Wallarm Design System component library.</Text>
    <Separator spacing={16} />
    <HStack gap={0}>
      <Text>Blog</Text>
      <Separator decorative orientation='vertical' spacing={16} />
      <Text>Docs</Text>
      <Separator decorative orientation='vertical' spacing={16} />
      <Text>Source</Text>
    </HStack>
  </VStack>
);
```

## Usage

```tsx
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

| Prop           | Type                                                 | Default      | Description |
| -------------- | ---------------------------------------------------- | ------------ | ----------- |
| title          | `string \| undefined`                                |              |             |
| defaultChecked | `boolean \| undefined`                               |              |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |              |             |
| autoFocus      | `boolean \| undefined`                               |              |             |
| id             | `string \| undefined`                                |              |             |
| tabIndex       | `number \| undefined`                                |              |             |
| rel            | `string \| undefined`                                |              |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |              |             |
| orientation    | `{ horizontal: string; vertical: string; }`          | `horizontal` |             |
| spacing        | `complex`                                            |              |             |
| data-testid    | `string \| undefined`                                |              |             |
| decorative     | `boolean \| undefined`                               | `true`       |             |