Marker

The default marker renders a muted status line — ideal for tool-call updates in an AI chat transcript. Compose MarkerIcon for a leading icon (rendered aria-hidden, so keep the meaning in the text) and MarkerContent for the label.

For in-progress states, place a Spinner in MarkerIcon and add role="status" so screen readers announce updates. Apply the bb:shimmer utility class to MarkerContent for an animated gradient text effect. The Marker family ships the bb:shimmer and bb:scroll-fade-x CSS utilities used across the chat components.

Use MarkerVariant.Border for status rows that keep the default left alignment while adding a bottom divider — useful for stacked activity logs where each step should be visually separated from the next.

MarkerVariant.Separator renders an uppercase, centered label flanked by horizontal lines — the classic conversation divider for date boundaries or system events such as history compaction.

Set AsChild="MarkerElement.Button" with @onclick for clickable actions, or provide Href to render an anchor — the marker switches from Div to Anchor automatically when Href is set, so AsChild can be omitted. Native elements give the marker proper keyboard focus and activation semantics.