Divider

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

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 | | --- | --- | --- | --- | | 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.