# Divider



> Divider component is used to visually separate and group elements horizontally or vertically.

## Examples

### Default

```tsx
import { Divider, Stack } from "@kesko/components";

export default () => (
  <Stack>
    Item
    <Divider />
    Item
    <Divider />
    Item
  </Stack>
);
```

```html
<k-stack>
  Item
  <k-divider></k-divider>
  Item
  <k-divider></k-divider>
  Item
</k-stack>
```

### Color

```tsx
import type { CSSProperties } from "react"
import { Divider } from "@kesko/components";

export default () => (
  <Divider style={{"--k-divider-color": "var(--k-color-accent)"} as CSSProperties} />
);
```

```html
<k-divider style="--k-divider-color: var(--k-color-accent)"></k-divider>
```

### Orientation

```tsx
import { Divider, Stack } from "@kesko/components";

export default () => (
  
  <Stack direction="row">
    Item
    <Divider orientation="vertical" />
    Item
    <Divider orientation="vertical" />
    Item
  </Stack>
);
```

```html
<k-stack direction="row">
  Item
  <k-divider orientation="vertical"></k-divider>
  Item
  <k-divider orientation="vertical"></k-divider>
  Item
</k-stack>
```

### Size

```tsx
import type { CSSProperties } from "react"
import { Divider } from "@kesko/components";

export default () => (
  <Divider style={{"--k-divider-size": "var(--k-size-border-button)"} as CSSProperties} />
);
```

```html
<k-divider style="--k-divider-size: var(--k-size-border-button)"></k-divider>
```


## Props

- `orientation` — `"horizontal" | "vertical"` (default: `"horizontal"`) The orientation of the divider.

## CSS custom properties

- `--k-divider-color` (default: `var(--k-color-border-divider)`) Overrides the divider color.
- `--k-divider-size` (default: `1px`) Overrides the divider size.