Two components answer "date break", and this is the one for prose

<x-wirekit::date-separator> is a horizontal rule with a centered label, for a document or a feed. Inside a chat thread, use <x-wirekit::chat-marker> instead — it renders the non-message rows of a thread (streaming status, system notes, labeled date breaks) and carries the thread's own semantics. They sit in different navigation groups because they belong to different surfaces, which is easy to read as one of them being the wrong choice.

Date Separator

A temporal divider for chat threads, activity feeds, and timelines. Automatically formats dates as relative labels ("Today", "Yesterday", day name) and falls back to locale-aware formatting for older dates.

Basic Usage

Today separator

Today

<x-wirekit::date-separator :date="now()" />

Relative Labels

The component auto-formats based on proximity to "now":

Relative date labels

Today

Yesterday

Thursday

Oct 4

<x-wirekit::stack gap="md">
    <x-wirekit::date-separator :date="now()" :now="now()" />
    <x-wirekit::date-separator :date="now()->subDay()" :now="now()" />
    <x-wirekit::date-separator :date="now()->subDays(3)" :now="now()" />
    <x-wirekit::date-separator :date="now()->subDays(14)" :now="now()" />
</x-wirekit::stack>

Custom Format

Override the auto-formatting with a PHP date format string:

Custom format

18.10.2026

<x-wirekit::date-separator :date="now()" format="d.m.Y" />

Sticky Variant

Sticks to the top of a scrollable container — ideal for chat UIs. A message that takes the focus on the way up comes to rest below the separator rather than under it:

Sticky variant

Today

<x-wirekit::date-separator :date="now()" variant="sticky" />

Custom Content via Slot

Override the label entirely with your own content:

Custom slot content

New messages

<x-wirekit::date-separator :date="now()">New messages</x-wirekit::date-separator>

Props

Prop	Type	Default	Description
`date`	`DateTimeInterface\|string`	`null`	The date to display: a date object of any class or a string. The object you pass is read, never changed.
`variant`	`string`	`'inline'`	Visual variant: `inline` or `sticky`
`format`	`string`	`null`	PHP date format (overrides auto-formatting)
`now`	`DateTimeInterface\|string`	`null`	Reference date for relative labels (for testing)
`scope`	string\|null	`null`	Scoped personalization name
`timezone`	`string`	`config('app.timezone')`	Timezone for date display. A date object of any class is shown in it; a string without a zone of its own is read in it

Accessibility

role="separator" on root element
aria-label with full human-readable date (e.g. "Monday, April 20, 2026")
Semantic <time> element with datetime attribute (ISO format)
Decorative border lines marked aria-hidden="true"

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

Don't use date-separator for non-date headings. It carries an implicit <time> semantic — use <x-wirekit::heading> for plain section labels.

Design Tokens

Token	Used for
`--font-wk-sans`	Date-separator font family
`--font-wk-heading-weight`	Date label weight
`--text-wk-xs`	Date label font size
`--color-wk-text-muted`	Date label text
`--color-wk-border`	Horizontal divider line

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.

Date Separator

Was this page helpful?