Date
- Stable
- WCAG 2.2 evidence
- RTL
Marks where a new day starts in a conversation: a label between two lines. The lines are decorative (aria-hidden); the label is text in the reading order (WCAG 1.3.1), never truncated (1.4.10,
1.4.12), in text/muted (contrast audited in Light and Dark; 1.4.3). Logical layout, so it mirrors in right-to-left.
Presentational: renders in React Server Components. Consumer duties: format the date for the locale; use it between messages, not on every message.
import { DateSeparator } from "@nexera-ui/react";- 4
- examples
- 2
- props
- 1
- live controls
- 1
- platform
- 5
- WCAG criteria
- 3
- blocks use it
Try every prop. Copy the code.
Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.
import { DateSeparator } from "@nexera-ui/react";
<DateSeparator />Examples 3
The same examples as Storybook, rendered live. Open Code to copy one.
In conversation
Between messages, with a machine-readable date for a formatted label.
import { DateSeparator } from "@nexera-ui/react";
export function InConversation() {
return (
<div className="flex max-w-xl flex-col gap-4">
<p className="m-0 text-body-default text-primary">
Can I take Friday off for a family event?
</p>
<DateSeparator label="Thursday, 12 Mar 2026" dateTime="2026-03-12" />
<p className="m-0 text-body-default text-primary">Approved. Enjoy the long weekend.</p>
</div>
);
}
Long label
A long label wraps; the lines shrink but stay visible.
import { DateSeparator } from "@nexera-ui/react";
<div className="max-w-xs">
<DateSeparator label="Thursday, 12 March 2026 (the first day of the new leave policy)" />
</div>;
Right to left
Right-to-left: the layout mirrors.
import { DateSeparator } from "@nexera-ui/react";
<DateSeparator label="اليوم" />;
Props 2
Press "Try it" on a card to load that prop into the playground.
2 props shown
label*NexeraReactNodeThe day the following messages belong to, already formatted for the
reader's locale, for example "Today", "Yesterday" or "12 Mar 2026" (format with Intl.DateTimeFormat or
@internationalized/date). It is read as text, so screen reader users hear where a new day starts.
dateTimeNexerastringMachine-readable date of label (ISO 8601, for example 2026-03-12). When set, the label is a <time> element.
* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.
Accessible by default.
Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.
WCAG 2.2 evidence
2 direct · 3 supporting- 1.1.1Non-text ContentLevel A · tested directly
- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.4.10ReflowLevel AA · supporting test
- 1.4.11Non-text ContrastLevel AA · supporting test
- 1.4.12Text SpacingLevel AA · supporting test
Fits any width.
Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.
Styling hooks
Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.
<DateSeparator className="shadow-sm" />Used in blocks
- ChatMessaging and collaboration
- Helpdesk assistantMessaging and collaboration
- Day separators and system notesMessaging and collaboration
Related components
- ChatHeaderThe top bar of a conversation: avatar, the name as a heading, a status line and actions such as Search and More.
- ComposerThe message box under a conversation: a growing textarea with attach, emoji and voice buttons, a Send button, a "replying to" bar, attachments and a voice recording row.
- ConversationItemOne conversation in a list: avatar, name, time, the last message and an unread count.
- MessageBubbleOne chat message: `Direction` (incoming, outgoing) x `Type` (text, reply, file, image) x `Group` (single, continued), with sender name and avatar, time, an edited mark and read ticks.
- ReactionA reaction under a message, such as a thumbs up, that the user can add or remove.
- SystemMessageAn event in a conversation that nobody wrote, such as someone joining or a channel being renamed: a small muted pill with an optional icon.
- TypingIndicatorShows that someone is writing a reply: three dots in a bubble and a short text.