Marker

Default density Compact density Restart from the initial state Show the copyable source

Reading 4 files Worked for 42s Switched to release-2.4

Usage

A Marker annotates a stream, such as a chat transcript or an activity log, without becoming a message itself. It adds no role, so meaning lives in its text; supply role="status" yourself when the content is a live update.

Variants

The default has no boundary. separator centres the content between two rules, for breaks in a timeline; border sets it above a rule, for a step that closes a section.

Default density Compact density Restart from the initial state Show the copyable source

Priya joined the project Today Deployed to production

Tones

tone colors the text and icon: neutral (the default), accent, success or danger. Keep the outcome in the words too, since color alone is not announced.

Default density Compact density Restart from the initial state Show the copyable source

Build queued Review requested from Priya All 128 checks passed Deploy to production failed

Icons

The icon slot takes an Icon or a decorative Spinner. The icon region is hidden from assistive technology, so the text must carry the meaning on its own.

Default density Compact density Restart from the initial state Show the copyable source

Compacting conversation Conversation compacted Opened pull request #482

Shimmer

shimmer sweeps a highlight across the text while a status is still streaming, such as an agent step in progress. Remove it when the step finishes; reduced motion shows the text without the sweep. --tp-shimmer-color, --tp-shimmer-duration, --tp-shimmer-spread and --tp-shimmer-angle tune it.

shimmer works with every variant and leaves the icon and rules unchanged.

The highlight is derived from the text color: in a light color scheme the band fades the text, in a dark scheme it brightens it, so it follows tone and inherited colors. The band sweeps in the reading direction, right to left in a right-to-left context, and repeats every eight times --tp-duration-normal (2.24 s by default). Clearing shimmer restores ordinary text; setting it again restarts the sweep, also when it was cleared in the same frame.

Tune the effect with custom properties on the Marker or on any ancestor; they inherit, so one container can adjust every shimmer inside it.

The shimmer paints the text through the content’s background, so it suits text and inline phrasing such as strong or a link. A control placed in shimmering content loses its text paint. Shimmer changes no role, name or announcement.

Marker declares the ambient shimmer motion role on its marker-content part, with the start and stop phases, no context and non-blocking completion. A driver that claims it replaces the sweep; the gradient paint stays on the content for the driver to move through background-position.

Default density Compact density Restart from the initial state Show the copyable source

Searching 14 files for “retry policy” Thinking

Actions

A Marker owns no action state, but its content can hold a link or a Button. The control keeps its own focus and semantics.

Default density Compact density Restart from the initial state Show the copyable source

Older messages hidden. Show all Review 3 changes

To make the whole Marker the control, render its marker part as a native link or button through partContracts, keeping the supplied bind and content. partPresentation arranges the parts, for example to center the content or stack the icon above it.

A delegated link or button must preserve bind and content, supply its native attributes and have an accessible name.

Default density Compact density Restart from the initial state Show the copyable source

Opened pull request #482 Worked for 42s Priya left the conversation All 128 checks passed

Single sweep

--tp-shimmer-iterations: 1 plays one sweep instead of looping, which suits a reveal when a step completes. Set shimmer again to replay it.

Default density Compact density Restart from the initial state Show the copyable source

Summary ready Replay

Compositions

A Marker can label an Accordion item, so a step summary expands into its details, or sit around a Drawer trigger that opens the full record.

Default density Compact density Restart from the initial state Show the copyable source

Worked for 1m 12s Read the billing service, updated the proration rule and added two tests for mid-cycle seat changes. Explored 3 files billing/proration.ts billing/seats.ts billing/proration.test.ts Close

API Reference

Every element also accepts motion-policy.

Related

Components, widgets and patterns that use this one.