import AlignTitleDemo from './demo/AlignTitle'; import AlignTitleSource from './demo/AlignTitle.tsx?raw'; import ContentSectionDemo from './demo/ContentSection'; import ContentSectionSource from './demo/ContentSection.tsx?raw'; import HorizontalDemo from './demo/Horizontal'; import HorizontalSource from './demo/Horizontal.tsx?raw'; import PlainAndGapDemo from './demo/PlainAndGap'; import PlainAndGapSource from './demo/PlainAndGap.tsx?raw'; import VerticalDemo from './demo/Vertical'; import VerticalSource from './demo/Vertical.tsx?raw';
A divider line separates different content.
- Divide sections of article.
- Divide inline text and links such as the operation column of table.
import { Divider } from 'tiny-design';Divider defaults to horizontal. Horizontal dividers support inner text, line variants, and plain text styling.
</Demo>
<Demo>
Use orientation="vertical" to render a vertical divider.
</Demo>
<Demo>
Use plain to reduce emphasis and titleGap to control title spacing.
</Demo>
Set the title placement to start, center, or end. This only applies to horizontal dividers with inner text.
</Demo>
<Demo>
Use dividers as lightweight section labels inside cards, settings panels, or summaries.
</Demo>
| Property | Description | Type | Default |
|---|---|---|---|
| orientation | orientation of divider | enum: horizontal | vertical |
horizontal |
| variant | line style variant | enum: solid | dashed | dotted |
solid |
| titlePlacement | position of title inside horizontal divider with text | enum: start | center | end |
center |
| plain | whether divider text uses plain emphasis | boolean | false |
| titleGap | horizontal gap between divider title and line | string | number | token value |
| style | style object of container | CSSProperties | - |
| className | className of container | string | - |