# Divider

The `Divider` component is used as a thin line for delimiting and grouping elements to reinforce visual hierarchy.

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

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

### Orientation

Use the `direction` property to manage the `Divider` orientation. The default orientation is `horizontal`.

#### 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>;
```

#### Vertical

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

### Custom content

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

### Alignment

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

## Properties

| Name        | Description                                | Type                    | Default      |
| :---------- | :----------------------------------------- | :---------------------- | :----------- |
| className   | `class` HTML attribute                     | `string`                | -            |
| orientation | Determines the divider direction           | `horizontal - vertical` | `horizontal` |
| children    | Custom content inside the divider          | `React.ReactNode`       |              |
| align       | Custom content position                    | `start - center - end`  | `start`      |
| style       | `style` HTML attribute                     | `React.CSSProperties`   |              |
| qa          | `data-qa` HTML attribute, used for testing | `string`                |              |

### CSS API

| Name                | Description                                                                      |
| :------------------ | :------------------------------------------------------------------------------- |
| `--g-divider-color` | Divider color                                                                    |
| `--g-divider-size`  | Divider size (height for horizontal orientation, width for vertical orientation) |