Divider

A visual separator used to divide content sections or list items.

Import

tsx

import { Divider } from '@tac-ui/web';

Interactively configure the Divider props below.

Variant

tsx

<Divider variant="full" />

The default variant spans the full width of its container as a 1px horizontal rule.

tsx

<Divider />

The inset variant adds horizontal margins on both sides, commonly used inside list items or cards.

tsx

<Divider variant="inset" />

The thick variant renders a 2px rule for stronger visual separation between major sections.

tsx

<Divider variant="thick" />

Pass a label string to render centered text between two rule lines, useful for separating form sections or login options.

tsx

<Divider label="OR" />

Prop	Type	Default	Description
variant	"full" \| "inset" \| "thick" \| "withLabel"	"full"	Visual style variant of the divider.
label	string	-	Text label rendered in the center of the divider; implies withLabel layout.
className	string	-	Additional CSS class names.