Divider

Thickness

Three token-driven thicknesses are available. The default is md (2px).

<div className="flex flex-col gap-6 w-60">
<Divider thickness="sm" />
<Divider thickness="md" />
<Divider thickness="lg" />
</div>

Colour

Two token-driven colours are available: default (--color-border-default) and strong (--color-border-strong, a touch darker).

<div className="flex flex-col gap-6 w-60">
<Divider colour="default" />
<Divider colour="strong" />
</div>

Direction

horizontal (default) fills width; vertical self-stretches (align-self: stretch / alignSelf: 'stretch') to fill the height of the flex row it’s placed in — this overrides even a row with items-center, so it matches the height of whatever sibling content established the row, with no fixed-height wrapper needed. In this isolated demo there’s no sibling content to establish a height, so the wrapper still needs an explicit height.

<div className="flex items-start gap-6">
<div className="w-60">
  <Divider direction="horizontal" />
</div>
<div className="flex h-16">
  <Divider direction="vertical" />
</div>
</div>

Inline (end-cap shape)

inline (default false) gives rounded end-caps; true gives flat/square 90° ends. Only visibly different at thickness="lg".

<div className="flex flex-col gap-6 w-60">
<Divider thickness="lg" inline={false} />
<Divider thickness="lg" inline={true} />
</div>

Surface tone

Neither default nor strong colour has an inverse counterpart today, so Divider looks the same on both tones rather than switching.

<div className="flex gap-4">
<Surface tone="neutral" className="w-60 p-4">
  <Divider />
</Surface>
<Surface tone="inverse" className="w-60 p-4">
  <Divider />
</Surface>
</div>

When to use

Use Divider to separate distinct sections of content with a thin horizontal rule — for example between a panel’s header and body, or between body content and a footer. Modal and BottomSheet both use it internally for exactly this.

Thickness

Accessibility

Divider is always decorative (aria-hidden="true" / accessibilityElementsHidden on native) — it has no accessible name or role. The sections it separates already convey structure through the surrounding DOM/component tree.

When not to use

• A bordered container: if you just need a bottom/top border on an existing box, a border utility may be simpler than introducing a new element.

Props

Divider is a Tier-2 (a11y-allowlist) component — only id/data-testid (web) or nativeID/testID/accessibilityHint (native) pass through beyond the props below. There is no className/style passthrough; sizing comes from thickness/direction and colour comes from colour.

Import

Web

import { Divider } from '@checkatrade/components-web';

<Divider />
<Divider thickness="lg" />

Native

import { Divider } from '@checkatrade/components-native';

<Divider />
<Divider thickness="lg" />

Platform status

Accessibility

Web

• Always role="presentation" and aria-hidden="true" — completely invisible to assistive technology.

React Native

• Always accessibilityElementsHidden with importantForAccessibility="no-hide-descendants".

Known gaps

• Neither colorBorderDefault nor colorBorderStrong has an inverse-surface counterpart token, so Divider does not vary by Surface tone.

No releases yet.