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

Open in new tab 
import { Divider, Stack } from "@kesko/components";

export default () => (
  <Stack>
    Item
    <Divider />
    Item
    <Divider />
    Item
  </Stack>
);
import type { CSSProperties } from "react"
import { Divider } from "@kesko/components";

export default () => (
  <Divider style={{"--k-divider-color": "var(--k-color-theme)"} as CSSProperties} />
);
import { Divider, Stack } from "@kesko/components";

export default () => (
  
  <Stack direction="row">
    Item
    <Divider orientation="vertical" />
    Item
    <Divider orientation="vertical" />
    Item
  </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} />
);

Properties

NameDescriptionTypeDefault
orientation

The orientation of the divider.

"horizontal" | "vertical""horizontal"

Styles

CSS custom properties provide finer-grained control than props. Prefer the props API when it suits your need.

NameDescriptionDefault
--k-divider-color

Overrides the divider color.

var(--k-color-border-divider)
--k-divider-size

Overrides the divider size.

1px

Accessibility #

The divider is a role="separator" with the matching aria-orientation, so screen readers can announce it as a break between content. It is not focusable and carries no text content.

  • Separate sections, not sentences. Place it between blocks of content or list groups, where a screen reader announcing “separator” adds meaning. Inside running text or a single label it only interrupts.
  • Give vertical dividers a height. A vertical divider only shows a line as tall as its container, with one line of text as the minimum.
  • Keep it empty. The component drops any children. A heading or a label that belongs to the next section goes after the divider, not inside it.
  • Pick a stronger color when the line carries meaning. The default --k-color-border-divider is a subtle neutral, about 2:1 against the page background, which is fine for a line that only tidies the layout. When people need to see the line to understand the page, use a color with 3:1 against the surface it sits on.

See the accessibility guidelines and the A11Y checklist for more details.

Usage #

There are two necessary parts to using the Divider component. The @kesko/components package and the CSS Framework are required. Everything else is optional:

npm install @kesko/components @kesko/css

Once installed, load the CSS Framework in your app’s entry point or root layout:

import "@kesko/css";

Then, you can import the Divider:

import { Divider } from "@kesko/components";

Projects without React can get the same styles from @kesko/css by importing the components stylesheet as well:

@import "@kesko/css";
@import "@kesko/css/components";

Resources #