Marker

The Marker component displays inline conversation markers such as status updates, system notes, bordered rows, and labeled separators.

Installation

Copy the following code into your app directory.

uv run buridan add component marker

Anatomy

Use the following composition to build a Marker component.

marker.root(
    marker.icon(),
    marker.content(),
)

Usage

from components.ui.marker import marker

Examples

Variants

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

A default marker for inline notes.

A separator marker

A border marker for row boundaries.

import reflex as rx

from components.ui.marker import marker


def marker_variants_demo():
    return rx.el.div(
        # Default Marker
        marker.root(
            marker.content("A default marker for inline notes."),
        ),
        # Separator Marker
        marker.root(
            marker.content("A separator marker"),
            variant="separator",
        ),
        # Border Marker
        marker.root(
            marker.content("A border marker for row boundaries."),
            variant="border",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

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 or in-progress markers so updates are announced.

Compacting conversation

Running tests

import reflex as rx

from components.ui.marker import marker
from components.ui.spinner import spinner


def marker_status_demo():
    return rx.el.div(
        marker.root(
            marker.icon(spinner()),
            marker.content("Compacting conversation"),
            role="status",
        ),
        marker.root(
            marker.icon(spinner()),
            marker.content("Running tests"),
            variant="separator",
            role="status",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Shimmer

Add the shimmer utility class to marker.content for an animated streaming-text effect. The utility ships with the buridan package — see the shimmer docs for installation.

Thinking...

Reading 4 files

import reflex as rx

from components.ui.marker import marker


def marker_shimmer():
    return rx.el.div(
        marker.root(
            marker.content("Thinking...", class_name="shimmer"),
            role="status",
        ),
        marker.root(
            marker.content("Reading 4 files", class_name="shimmer"),
            variant="separator",
            role="status",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Separator

Use the separator variant for labeled dividers, such as dates or section breaks, in a conversation.

Today

Worked for 42s

Conversation compacted

import reflex as rx

from components.ui.marker import marker


def marker_separator():
    return rx.el.div(
        marker.root(
            marker.content("Today"),
            variant="separator",
        ),
        marker.root(
            marker.content("Worked for 42s"),
            variant="separator",
        ),
        marker.root(
            marker.content("Conversation compacted"),
            variant="separator",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Border

Use the border variant for status rows that should keep the default marker alignment while separating the next row.

Switched to release-candidate

Reviewed 8 related files

Opened implementation notes

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.marker import marker


def marker_border():
    return rx.el.div(
        marker.root(
            marker.icon(hi("GitBranchIcon")),
            marker.content("Switched to release-candidate"),
            variant="border",
        ),
        marker.root(
            marker.icon(hi("Search01Icon")),
            marker.content("Reviewed 8 related files"),
            variant="border",
        ),
        marker.root(
            marker.icon(hi("File01Icon")),
            marker.content("Opened implementation notes"),
            variant="border",
        ),
        class_name="flex w-full max-w-sm flex-col gap-3 py-12",
    )

With Icon

Use marker.icon to render an icon alongside the content. Use flex-col to stack the icon above the content.

Switched to a new branch

Explored 4 files

Syncing completed

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.marker import marker


def marker_with_icon():
    return rx.el.div(
        marker.root(
            marker.icon(hi("GitBranchIcon")),
            marker.content("Switched to a new branch"),
        ),
        marker.root(
            marker.icon(hi("Search01Icon")),
            marker.content("Explored 4 files"),
            variant="separator",
        ),
        marker.root(
            marker.icon(hi("BookOpenCheckIcon")),
            marker.content("Syncing completed"),
            class_name="flex-col",
        ),
        class_name="flex w-full max-w-sm flex-col gap-12 py-12",
    )

Links and Buttons

Turn a marker into a link or button with.

View the pull request

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.marker import marker


def marker_link_button():
    return rx.el.div(
        marker.root(
            rx.el.a(
                marker.icon(hi("GitBranchIcon")),
                marker.content("View the pull request"),
                href="#links-and-buttons",
                class_name="group flex flex-row items-center gap-x-2 underline transition-colors hover:text-foreground",
            ),
            variant="default",
        ),
        marker.root(
            rx.el.button(
                marker.icon(
                    hi("ArrowMoveUpRightIcon"),
                    class_name="group-hover:text-foreground transition-colors",
                ),
                marker.content(
                    "Revert this change",
                    class_name="group-hover:text-foreground transition-colors",
                ),
                type="button",
                class_name="group flex flex-row items-center gap-x-2 transition-colors",
                on_click=rx.toast("You clicked the revert button"),
            ),
            variant="default",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12 justify-center",
    )

Accessibility

marker.root is presentational by default. The correct semantics depend on how you use it, so choose the role based on intent rather than relying on a single default.

Status and Progress

For streaming or progress markers such as "Thinking..." or a running tool, set role="status" so assistive tech announces the update as it appears. marker.root forwards role to the underlying element.

python

marker.root(
    marker.icon(spinner()),
    marker.content("Compacting conversation"),
    role="status",
)

Labeled Separators

A separator that carries text, such as a date or a section label, needs no role. The divider lines are decorative CSS pseudo-elements, and the text is announced as ordinary content.

python

marker.root(
    marker.content("Today"),
    variant="separator",
)

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

Bordered Markers

A bordered marker keeps the same semantics as the default marker. The bottom border is decorative, so choose role="status" or no role based on the marker's purpose.

python

marker.root(
    marker.icon(rx.icon("file-text", size=14)),
    marker.content("Opened implementation notes"),
    variant="border",
)

Decorative Icons

marker.icon is decorative and hidden from assistive tech with aria-hidden, so the adjacent marker.content carries the meaning. For an icon-only marker, provide an aria_label so it is not announced as empty.

python

marker.root(
    marker.icon(rx.icon("check", size=14)),
    aria_label="Synced",
)

Interactive Markers

When a marker links or triggers an action, render it as an rx.link or pass on_click so it is focusable and exposes the correct role.

python

rx.link(
    marker.root(
        marker.icon(rx.icon("file-text", size=14)),
        marker.content("Explored 4 files"),
    ),
    href="/files",
)

API Reference

marker.root

The root marker element.

Prop	Type	Default	Description
variant	"default" \| "border" \| "separator"	"default"	The marker layout.
class_name	str	""	Additional classes to apply to the root element.
**props	dict	—	Any valid HTML attribute (role, aria_label).

marker.icon

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

Prop	Type	Default	Description
class_name	str	""	Additional classes to apply to the icon slot.

marker.content

The marker text content.

Prop	Type	Default	Description
class_name	str	""	Additional classes to apply to the content slot.
**props	dict	—	Any valid HTML attribute forwarded to the span.

External Tools

︲

Agent Resources

llms.txt