Divider

<ts-divider> vv0.4.0

The ts-divider component.

Open in Storybook for interactive demos.

Preview

<ts-divider orientation="horizontal" variant="solid"></ts-divider>

Properties

Property	Attribute	Type	Default	Description
label	label	string | undefined	—	Optional label text displayed in the center of the divider.
orientation	orientation	"horizontal" | "vertical"	'horizontal'	The divider orientation.
variant	variant	"dashed" | "dotted" | "solid"	'solid'	The line style variant.

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The divider line element.
label	The optional label text.

ts-divider::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-divider orientation="horizontal" variant="solid"></ts-divider>

React

import { TsDivider } from '@tessera-ui/react';

<TsDivider orientation="horizontal" variant="solid"></TsDivider>