Divider component is used to visually separate and group elements horizontally or vertically.
import { Divider, Stack } from "@kesko/components";
export default () => (
<Stack>
Item
<Divider />
Item
<Divider />
Item
</Stack>
);<k-stack>
Item
<k-divider></k-divider>
Item
<k-divider></k-divider>
Item
</k-stack>import type { CSSProperties } from "react"
import { Divider } from "@kesko/components";
export default () => (
<Divider style={{"--k-divider-color": "var(--k-color-accent)"} as CSSProperties} />
);<k-divider style="--k-divider-color: var(--k-color-accent)"></k-divider>import { Divider, Stack } from "@kesko/components";
export default () => (
<Stack direction="row">
Item
<Divider orientation="vertical" />
Item
<Divider orientation="vertical" />
Item
</Stack>
);<k-stack direction="row">
Item
<k-divider orientation="vertical"></k-divider>
Item
<k-divider orientation="vertical"></k-divider>
Item
</k-stack>import type { CSSProperties } from "react"
import { Divider } from "@kesko/components";
export default () => (
<Divider style={{"--k-divider-size": "var(--k-size-border-button)"} as CSSProperties} />
);<k-divider style="--k-divider-size: var(--k-size-border-button)"></k-divider>Props
| Name | Description | Type | Default |
|---|---|---|---|
orientation | The orientation of the divider. | "horizontal" | "vertical" | "horizontal" |
CSS custom properties
CSS custom properties provide finer-grained control than props. Prefer the props API when it suits your need.
| Name | Description | Default |
|---|---|---|
--k-divider-color | Overrides the divider color. | var(--k-color-border-divider) |
--k-divider-size | Overrides the divider size. | 1px |