Marker

An inline status, system note, bordered row, or labeled separator in a conversation.

Synced 4 meter readings

The Marker component displays inline conversation markers such as status updates, system notes, bordered rows, and labeled separators. Compose it with Message in a conversation thread.

Usage

import { Marker, MarkerContent, MarkerIcon } from '@epilot/spark-ui/marker'

<Marker>
  <MarkerIcon>
    <MaterialSymbol name="check" />
  </MarkerIcon>
  <MarkerContent>Synced 4 meter readings</MarkerContent>
</Marker>

Composition

Marker
├── MarkerIcon
└── MarkerContent

Examples

Variants

Use variant to switch between an inline marker, a bordered row, and a labeled separator.

Inverter firmware updated

Scheduled charge at 22:00

Today

Variant	Description
`default`	An inline marker for status, notes, and actions.
`border`	A default marker with a bottom border under the row.
`separator`	A centered label with divider lines on each side.

Status

Set role="status" and include a Spinner for streaming markers so updates are announced. Add the shimmer utility to MarkerContent for an animated streaming-text effect.

Analyzing consumption…

Links and buttons

Turn a marker into a link or button with the render prop on Marker.

View the full report

<Marker render={<a href="/files" />}>
  <MarkerContent>View the pull request</MarkerContent>
</Marker>

Accessibility

Marker is presentational by default; choose the role based on intent.

Status and progress. For streaming or progress markers, set role="status" so assistive tech announces the update. Marker forwards role to the underlying element.
Labeled separators. A separator that carries text (a date, a section label) needs no role, because the divider lines are decorative pseudo-elements.

Note: Do not add role="separator" to a labeled divider. A separator takes its accessible name from aria-label, not from its text, so the visible label would not be announced. Reserve role="separator" for a divider with no meaningful text.

Decorative icons. MarkerIcon is aria-hidden, so the adjacent MarkerContent carries the meaning. For an icon-only marker, provide an aria-label.
Interactive markers. When a marker links or triggers an action, render it as a real <button> or <a> via render so it is focusable and exposes the correct role.

API Reference

Marker

The root marker element. The file also exports markerVariants for composing the marker styles into custom components.

Prop	Type	Default	Description
`variant`	`'default' \| 'border' \| 'separator'`	`'default'`	The marker layout.
`render`	`ReactElement \| function`	—	Render as a different element, such as a link.
`className`	`string`	—	Additional classes.

MarkerIcon

A decorative icon slot, hidden from assistive tech with aria-hidden.

Prop	Type	Default	Description
`className`	`string`	—	Additional classes to apply to the icon slot.

MarkerContent

The marker text content.

Prop	Type	Default	Description
`className`	`string`	—	Additional classes to apply to the content slot.

Marker

On this page