Divider

A thin line that separates content. Supports horizontal and vertical orientations, dashed and dotted styles, and an optional centered label.

Playground

Controls

Orientation

Appearance

Label

Theme

HTMLReact

ShareCopy

Usage

<!-- Horizontal (default) -->
<lt-divider></lt-divider>

<!-- With label -->

<lt-divider label="or"></lt-divider>

<!-- Line styles -->

<lt-divider appearance="dashed"></lt-divider>
<lt-divider appearance="dotted"></lt-divider>

<!-- Vertical -->

<div style="display:flex;height:48px;align-items:stretch;">
<span>Left</span>
<lt-divider orientation="vertical"></lt-divider>
<span>Right</span>
</div>

import { Divider } from '@latty-ds/react';

<Divider />
<Divider label="or" />
<Divider appearance="dashed" />
<Divider orientation="vertical" />

<template>
<lt-divider></lt-divider>
<lt-divider label="or"></lt-divider>
<lt-divider appearance="dashed"></lt-divider>
<lt-divider orientation="vertical"></lt-divider>
</template>

API