LabeledDivider
A turn in a list or a thread, said in words: the label in a muted Badge, a dotted ink line either side, gap-2 apart.
In a thread
The Inbox marks where a client moved to another channel, and when. The lines fill the width either side of the badge; the label stays on one line.
Can I come an hour later?
Continued by email · Fri, 11:39
Hi, could it be 11:00 instead?
import { LabeledDivider } from "@/components/shared/labeled-divider";
<LabeledDivider>Continued by email · Fri, 11:39</LabeledDivider>Guidelines
- Use it for a turn the reader should notice: a change of channel, a day, a hand-over.
- Use it for every timestamp: a plain time between messages is quieter and enough.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | What turned here, short: it sits on one line. |
| className | string | — | Spacing where it stands. |