Divider

Usage

Basic

The default slot adds a label; textPlacement sets where it sits.

Gradient

gradient takes start, end, or both; true equals both.

Vertical

direction="vertical" separates inline content and also supports dashed and gradient.

Best Practices

• Separate semantic sections, not every row; dense tables and lists use row spacing or table borders.
• Keep labels short; turn long text into a real heading.
• Use vertical dividers only in inline metadata or toolbars, where surrounding text already gives context.
• Inside Drawer, Card, and Form surfaces, use TxDivider instead of hard-coded borders.

API Reference

Props

Slots

Overview

• The root is role="separator", with aria-orientation taken from direction.
• Horizontal dividers span the container width; labels render only when horizontal.
• start fades in from transparent, end fades out to transparent, and both fades both ends around a solid middle; vertical dividers fade along the vertical axis.

Technologies

• Source: packages/tuffex/packages/components/src/divider/.