Divider

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeDividerExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeDividerExample/></NativeScope>}

Variants

Choose single, double, or fill. Every treatment uses Helios UI semantic border and surface tokens, so it follows the active theme automatically.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="divider" id="variants"/>}

Alignment

The align prop positions content at the start, center, or end. Single-line dividers keep the hairline on the open side.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="divider" id="alignment"/>}

Icons, chips, buttons and avatars

Children are not restricted to text. An icon, a chip, a button, a button group, or a stack of avatars all sit in the same slot, and the line closes around whatever width they take. No extra props are involved: the content is composed as children, so anything compact belongs here.

NEW

Button

+7

AllUnreadArchived

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="divider" id="custom-content"/>}

Without content

Omit children for a purely structural separator. In this form the component exposes the native separator role and horizontal orientation to assistive technology.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="divider" id="without-content"/>}