Divider

A cross-platform React divider for separating content. Renders a horizontal line with an optional inline title and a dashed-stroke variant.

Divider is a line used to separate and group content within lists, menus, cards, or other containers. It can be plain or carry a short title that labels the group it introduces.

When to use

• To separate or group related content inside lists, menus, cards, or sections
• To create visual hierarchy between blocks of content
• To introduce a group with an optional title placed on the line

When not to use

• To add spacing only — use layout spacing instead
• As a decorative border around a container — use a border or container instead
• Between items that already have clear visual boundaries

Content guidelines

• Keep title text short — it labels a group, not a sentence.
• Size (L, M, S) sets the title text size; use N/A when the divider has no title.
• Use the dashed stroke sparingly, for lighter or secondary separation.
• Keep title alignment (Left, Right, Center) consistent within the same context.

Behaviour guidelines

Type — Horizontal separates stacked content; Vertical separates side-by-side content.

Title position — Left, Right, or Center places the label on the line; N/A renders a plain line.

Dash stroke — False is a solid line, True is a dashed line.

The divider is display-only and holds no interaction.

Accessibility

Expose it as a separator so assistive technology understands the structural break.

When the divider carries a title, that title should name the group it introduces.

Don't rely on the line alone to convey grouping — use proper headings or structure where the grouping is meaningful.

Ensure the line and any title meet contrast minimums against the background.

Installation

npm install @xsolla/xui-divider

Imports

import { Divider } from "@xsolla/xui-divider";

Quick start

import * as React from "react";
import { Divider } from "@xsolla/xui-divider";

export default function QuickStart() {
  return (
    <div>
      <p>Section A</p>
      <Divider />
      <p>Section B</p>
    </div>
  );
}

API Reference

<Divider>

| Prop | Type | Default | Description | | --------------- | ------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | size | "lg" \| "md" \| "sm" | "md" | Controls overall height, line weight, and title font size. | | title | string | — | Optional inline label. Rendered uppercase. | | titlePosition | "left" \| "center" \| "right" | "left" | Where the title sits relative to the line(s). | | dashStroke | boolean | false | Render a dashed line instead of solid. | | decorative | boolean | false | When true, the divider is hidden from assistive technology (aria-hidden) and omits role="separator". |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Examples

Sizes

import * as React from "react";
import { Divider } from "@xsolla/xui-divider";

export default function DividerSizes() {
  return (
    <div
      style={{ display: "flex", flexDirection: "column", gap: 24, width: 320 }}
    >
      <Divider size="sm" />
      <Divider size="md" />
      <Divider size="lg" />
    </div>
  );
}

With title

import * as React from "react";
import { Divider } from "@xsolla/xui-divider";

export default function DividerWithTitle() {
  return (
    <div
      style={{ display: "flex", flexDirection: "column", gap: 24, width: 320 }}
    >
      <Divider title="Section" titlePosition="left" />
      <Divider title="Or" titlePosition="center" />
      <Divider title="More" titlePosition="right" />
    </div>
  );
}

Dashed

import * as React from "react";
import { Divider } from "@xsolla/xui-divider";

export default function DashedDivider() {
  return (
    <div style={{ width: 320 }}>
      <Divider dashStroke />
    </div>
  );
}

Decorative

import * as React from "react";
import { Divider } from "@xsolla/xui-divider";

export default function DecorativeDivider() {
  return (
    <div style={{ width: 320 }}>
      <Divider decorative />
    </div>
  );
}

Accessibility

• The non-decorative divider has role="separator" so assistive tech announces a section break.
• Set decorative for purely visual lines; the divider then sets aria-hidden="true" and skips the separator role.