Divider

Visual separator line between items.

Section one

Section two

Contract

Overview

Machine-readable contract from Component Spec.

component: dividerexport: Dividerversion: 1attributes: data-refineui=divider

Anatomy

Part	data-refineui
root	divider

Variants

Axis	Values
layout	default, content, icon

Accessibility

Slot	Element	Role
divider	div	separator

Layout

Property	Value
direction	logical
rtl	true

Installation

npm install @refineui/react @refineui/tokens

Usage

import { Divider } from "@refineui/react";

<Divider />

<Divider layout="content" align="center">
  Or continue with
</Divider>

<Divider layout="icon" align="left" />

API Reference

Prop	Default	Type	Description
layout	"default"	"default" \| "content" \| "icon"	Divider layout style.
align	"center"	"center" \| "left" \| "right"	Alignment of content/icon (when layout is not default).
children	—	ReactNode	Content to display (required when layout is "content").