# Divider



```tsx
import {Divider} from '@gravity-ui/uikit';
```

Компонент `Divider` (разделитель) представляет собой тонкую линию для разграничения и группировки элементов с целью усиления их визуальной иерархии.

```tsx
<Divider className="custom-divider" direction="horizontal" />
```

### Ориентация

Ориентацию `Divider` можно задать с помощью свойства `direction`. Ориентация по умолчанию — `horizontal`.

#### Горизонтальная ориентация





```tsx
import {Container, Text, Divider} from '@gravity-ui/uikit';

<Container>
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea,
    perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur
    aliquid commodi atque sunt officiis natus?
  </Text>
  <Divider orientation="horizontal" />
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea,
    perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur
    aliquid commodi atque sunt officiis natus?
  </Text>
</Container>;
```



#### Вертикальная ориентация





```tsx
import {Flex, Label, Divider} from '@gravity-ui/uikit';

<Container>
  <Flex gap={3}>
    <Label>Label</Label>
    <Divider orientation="vertical" />
    <Label>Label</Label>
    <Divider orientation="vertical" />
    <Label>Label</Label>
    <Divider orientation="vertical" />
    <Label>Label</Label>
  </Flex>
</Container>;
```



### Пользовательский контент





```tsx
import {Divider, Flex, Container, Icon} from '@gravity-ui/uikit';
import {CheckIcon} from '@gravity-ui/icons';

<Container>
  <Flex gap={3}>
    <Divider>Custom content</Divider>
    <Divider>
      <Icon data={CheckIcon} size={16} />
    </Divider>
  </Flex>
</Container>;
```



### Выравнивание





```tsx
import {Divider, Flex, Container} from '@gravity-ui/uikit';

<Container>
  <Flex gap={3}>
    <Divider align="start">Start content</Divider>
    <Divider align="center">Center content</Divider>
    <Divider align="end">End content</Divider>
  </Flex>
</Container>;
```



### Свойства

| Имя         | Описание                                               | Тип                     | Значение по умолчанию |
| :---------- | :----------------------------------------------------- | :---------------------- | :-------------------- |
| className   | HTML-атрибут `class`.                                  | `string`                | -                     |
| orientation | Определяет направление разделителя.                    | `horizontal - vertical` | `horizontal`          |
| children    | Пользовательский контент внутри разделителя.           | `React.ReactNode`       |                       |
| align       | Расположение пользовательского контента.               | `start - center - end`  | `start`               |
| style       | HTML-атрибут `style`.                                  | `React.CSSProperties`   |                       |
| qa          | HTML-атрибут `data-qa`, используется для тестирования. | `string`                |                       |

### API CSS

| Имя                 | Описание            |
| :------------------ | :------------------ |
| `--g-divider-color` | Цвет разделителя.   |
| `--g-divider-size`  | Размер разделителя. |