GitHub

Marker

PreviousNext

A muted status line with an icon or a spinner, and optional separators.

New control
InteractiveMarker demo
<StackPanel Spacing="16" Width="420" HorizontalAlignment="Left">
  <gpui:Marker Content="Conversation archived">
    <gpui:Marker.Icon>
      <PathIcon Data="{StaticResource Gpui.Icon.Info}" />
    </gpui:Marker.Icon>
  </gpui:Marker>
  <gpui:Marker Classes="separator" Content="Today" />
  <gpui:Marker Classes="border" Content="Earlier messages" />
</StackPanel>

Usage

gpui:Marker is a muted text_sm row for a conversation or a timeline: an Icon in a 16px box, then the content, 8px apart. HorizontalContentAlignment places the row: Left (the default, GPUI Kit's start), Center or Right. While IsLoading, and there is no icon, a small spinner leads instead.

ClassMeaning
separator1px lines in the border color fill the rest of the row, on both sides of the content when centered or on one side when aligned to an end.
borderA bottom border, with 8px under the row.
shimmerWhile loading, a text content shimmers instead of the spinner (other content pulses).

Examples

HorizontalContentAlignment places the content and its separators at the start, center or end; without separators the row itself moves.

Alignment
InteractiveMarker demo: Alignment
<StackPanel Spacing="16" Width="420" HorizontalAlignment="Left">
  <gpui:Marker Classes="separator" Content="Start" HorizontalContentAlignment="Left" />
  <gpui:Marker Classes="separator" Content="Center" />
  <gpui:Marker Classes="separator" Content="End" HorizontalContentAlignment="Right" />
  <gpui:Marker Content="Online" HorizontalContentAlignment="Center">
    <gpui:Marker.Icon>
      <PathIcon Data="{StaticResource Gpui.Icon.CircleCheck}" />
    </gpui:Marker.Icon>
  </gpui:Marker>
  <gpui:Marker Content="Seen 2 minutes ago" HorizontalContentAlignment="Right" />
</StackPanel>

IsLoading leads with a spinner, or shimmers the text with shimmer; separators stay.

Loading
InteractiveMarker demo: Loading
<StackPanel Spacing="16" Width="320" HorizontalAlignment="Left">
  <gpui:Marker Content="Thinking" IsLoading="True" />
  <gpui:Marker Classes="shimmer" Content="Thinking" IsLoading="True" />
  <gpui:Marker Classes="separator" Content="Loading older messages" IsLoading="True" />
</StackPanel>

Not covered

  • Changing the separator's style (separator_style).