Divider

Dividers separate content sections. They can render as a plain horizontal rule or as a rule with centered text.

Basic Usage

A plain divider renders as an <hr> element with the .hr class from Tabler.

<TDivider />

Text Divider

Use the text prop or the default slot to add text inside the divider.

<TDivider text="Divider Text" />

Text Position

The position prop controls text alignment: start (left), center (default), end (right).

<TDivider text="Start" position="start" />
<TDivider text="Center" position="center" />
<TDivider text="End" position="end" />

Color

The color prop sets the text color, supporting all Tabler preset colors.

<TDivider text="Primary" color="primary" />
<TDivider text="Blue" color="blue" />
<TDivider text="Green" color="green" />
<TDivider text="Red" color="red" />
<TDivider text="Orange" color="orange" />
<TDivider text="Purple" color="purple" />
<TDivider text="Cyan" color="cyan" />

Spaceless Mode

The spaceless prop reduces the top and bottom margin, suitable for compact layouts.

<TDivider text="Default" />
<TDivider text="Spaceless" spaceless />

API

Props

Prop	Description	Type	Default
text	Divider text (also accepts default slot)	string	undefined
position	Text alignment	'start' | 'center' | 'end'	'center'
color	Text color (Tabler preset)	TablerColor	undefined
spaceless	Compact mode (reduced vertical margin)	boolean	false

Slots

Slot	Description
default	Text content for the divider, takes priority over text prop