Monet
@etched/monet 0.0.1

Marker

Ported

A label across a list of messages: a date between days, or the line where new messages start. Screen readers read its text in place. Native <div> attributes and ref pass through.

Today
import { Marker } from "@etched/monet/marker";

export function Preview() {
  return (
    <div style={{ inlineSize: "16rem" }}>
      <Marker>Today</Marker>
    </div>
  );
}

Installation

import { Marker } from "@etched/monet/marker";

Examples

In a thread

The default marks a day: subtle text between two lines. variant="new" marks where the messages the user has not seen start. Screen readers read the text in its place in the thread.

Lee Park
Offer call went well. He wants until Monday to decide.
Lee Park
No news yet. I will call him at noon.
New
Mira Osei
He accepted. Start date is November 17.
import { Message } from "@etched/monet/message";
import { Marker } from "@etched/monet/marker";

export function InAThread() {
  return (
    <div className="rows" style={{ maxInlineSize: "36rem" }}>
      <Marker>
        <time dateTime="2026-10-23">Thursday, October 23</time>
      </Marker>
      <Message name="Lee Park" time={<time dateTime="2026-10-23T16:20">4:20 PM</time>}>
        Offer call went well. He wants until Monday to decide.
      </Message>
      <Marker>
        <time dateTime="2026-10-26">Today</time>
      </Marker>
      <Message name="Lee Park" time={<time dateTime="2026-10-26T08:55">8:55 AM</time>}>
        No news yet. I will call him at noon.
      </Message>
      <Marker variant="new">New</Marker>
      <Message name="Mira Osei" time={<time dateTime="2026-10-26T11:48">11:48 AM</time>}>
        He accepted. Start date is November 17.
      </Message>
    </div>
  );
}

Accessibility

  • A plain div with no role. Screen readers read its text in its place in the thread; the lines are CSS only.
  • A MessageList announces new messages, not markers, so a marker that comes in is not announced.
  • Put words in the marker, such as "Today" or "New". The new variant's color alone says nothing to screen readers.

API reference

PropTypeDefaultDescription
children *ReactNode–The label, such as "Today" or "New". A date can be a <time dateTime="2026-10-26">.
variant"date" | "new""date"