Divider

The Divider component is a visual indicator to separate two pieces of content. It can be both horizontal and vertical.

AnatomyPermalink to: Anatomy

1. Divider: Horizontal line to visually separate content and, optionally, to thematically separate content.

UsagePermalink to: Usage

Use the Divider for separating content, eg. inside containers or when the page requires a shift in context (see more under Accessibility).

AccessibilityPermalink to: Accessibility

The Divider has no default semantic value, but it is possible to add the same semantic meaning as the native HTML <hr /> element, which is used for a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section (Source: MDN(external link)).

See the With role example for more information.

ExamplesPermalink to: Examples

HorizontalPermalink to: Horizontal

The Divider will render as a horizontal line as default:

import { Divider } from "@peakon/bedrock/react/divider";

<Divider />

VerticalPermalink to: Vertical

The Divider can be rendered as a vertical line with the direction="vertical" prop:

import { Divider } from "@peakon/bedrock/react/divider";

<div style={{ display: "flex", height: "50px", justifyContent: "center" }}>
  <Divider direction="vertical" />
</div>

With rolePermalink to: With role

The Divider can be given the same semantic meaning as the native HTML <hr /> element by giving it the role="separator" attribute:

import { Divider } from "@peakon/bedrock/react/divider";

<Divider role="separator" />

Custom colorPermalink to: Custom color

You can modify the color of the Divider by setting the --divider-color css customer property on a parent element. Please refer to the Border color tokens:

import { Divider } from "@peakon/bedrock/react/divider";

<div style={{ "--divider-color": "red" }}>
  <Divider />
</div>

Props TablePermalink to: Props Table

Props extend from HTML Div Element(external link), with the omission of className and style

ReferencesPermalink to: References

• MDN: HR element(external link)