ConversationDivider
A horizontal divider with a centered label, used to separate content in a conversation list or thread.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { ConversationDivider } from '@adaptavant/eds-core';
Default
Pass a label as children to describe the divider.
Unread messages
Today
<Stack className="gap-4 w-full">
<ConversationDivider>Unread messages</ConversationDivider>
<ConversationDivider isStrong>Today</ConversationDivider>
</Stack>
API Reference
ConversationDivider
| Prop | Default | Description |
|---|---|---|
children | _ | ReactNodeThe divider label (e.g. "Unread messages", "18 Aug 2026", "Today"). |
isStrong? | false | booleanWhether the divider label should be emphasized. |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
ConversationDivider parts
Unread messages
<ConversationDivider classNames={{ label: 'text-accent', line: 'border-accent' }}>
Unread messages
</ConversationDivider>
| Part | Description |
|---|---|
root | The divider container. |
line | The horizontal rules on either side of the label. |
label | The centered label. |