---
description: Компонент для визуального разделения контента.
---

<Overview group="layout">

# Separator [tag:component]

Компонент для визуального разделения контента. Поддерживает горизонтальное и вертикальное расположение,
различные стили оформления и настройку отступов.

</Overview>

## Основное использование

### Горизонтальный разделитель

import { BlockWrapper } from "@/components/wrappers";

{/* @example-description: Базовый горизонтальный разделитель `Separator` между блоками контента. */}
<Playground Wrapper={BlockWrapper}>
  ```jsx
  <Separator />
  ```
</Playground>

### Вертикальный разделитель

Для использования вертикального разделителя необходимо _обязательно_ обернуть в `flex`-контейнер

{/* @example-description: Вертикальные разделители `Separator` между элементами в строке. */}
<Playground>
  ```jsx
  <Link href="#news">Новости</Link>
  <Separator direction="vertical" size="xl" />
  <Link href="#calls">Звонки</Link>
  <Separator direction="vertical" size="xl" />
  <Link href="#friends">Друзья</Link>
  ```
</Playground>

## Отступы

Если помимо самого разделителя вам необходимы отступы вокруг него, то используйте свойство `size`,
оно принимает значения дизайн-системы (например, `"s"`, `"m"`, `"l"`), числовые значения и `CSS`-переменные.

```jsx
<Separator size="xs" /> // 4px
<Separator size={32} /> // 32px
<Separator size="var(--custom-spacing)" /> // Кастомная CSS-переменная
```

## Свойства компонентов раскладки

> Компонент `Separator` обладает flex-свойствами, подробнее про которые можно почитать на соответствующей странице [`Box`](/components/box/#flex-props).

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | `center` | Выравнивание разделителя в контейнере. |
| `appearance` | `"primary" \| "secondary" \| "primary-alpha"` | `primary` | Стиль отображения разделителя. |
| `direction` | `"horizontal" \| "vertical"` | `horizontal` | Направление отображения разделителя. |
| `flexBasis` | `FlexBasisProp` | `-` | Определяет начальный размер flex-элемента. |
| `flexGrow` | `FlexGrowProp` | `-` | Определяет, насколько элемент будет расти относительно остальных flex-элементов. |
| `flexShrink` | `FlexShrinkProp` | `-` | Определяет, насколько элемент будет сжиматься относительно остальных flex-элементов. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `padding` | `boolean` | `false` | Добавляет стандартные отступы у разделителя. |
| `size` | `SpacingSizeProp` | `-` | Размер контейнера, в который вложен разделитель.  Принимает значения дизайн-системы, числовые значения и css-переменные. |