Data Display
Chat Divider
A labelled divider inside a conversation: new messages, caught up, or where a summary folded older history.
When to use
Mark a point in a conversation: new messages, "you're caught up", where a summary folded older history.
When not to
Do not use it as a generic separator; use Separator.
Import
import { ChatDivider } from "@countryclub/ui-react";Variants
Accessibility
role="separator" with the label as visible text.
API reference
The props the kit declares itself, read from its types on every build. Every part also takes className, render (where it renders an element) and the native attributes of that element.
ChatDivider
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | Centered label, e.g. "New messages", "You're caught up", "Earlier messages summarized". | |
| icon | ReactNode | Optional leading icon (e.g. a summary or sparkle glyph). | |
| variant | "summary" | "default" | "unread" | default | - default — neutral hairline with a muted label. - summary — marks where a rolling summary folds older history. - unread — the "new messages" baseline; accented so it stands out. |