SutraUI.Activity (Sutra UI v0.4.0)

View Source

Shows visible progress for agent work, jobs, and multi-step background tasks.

Activity is a status list, not a transcript of private reasoning. Use it for safe, user-facing progress such as "Searching docs", "Reading files", or "Drafting answer".

Examples

<.activity>
  <:item status="complete">
    Searched documentation
  </:item>
  <:item status="running">
    Drafting answer
  </:item>
  <:item status="pending">
    Preparing summary
  </:item>
</.activity>

<.activity>
  <.activity_item status="running">
    <:marker>
      <span class="grid size-6 place-items-center rounded-full bg-primary text-primary-foreground">
        <svg viewBox="0 0 24 24" class="size-3" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <circle cx="11" cy="11" r="8" />
          <path d="m21 21-4.3-4.3" />
        </svg>
      </span>
    </:marker>

    Searching local files
  </.activity_item>
</.activity>

Attributes

  • compact - Reduces spacing for dense surfaces. Defaults to false.
  • class - Additional CSS classes.

Slot Attributes

The :item slot accepts:

  • status - One of pending, running, complete, error. Defaults to pending.
  • id - Optional DOM id, useful when rendering LiveView streams.
  • class - Additional classes for the item.

Slots

  • :item - Activity row content.
  • :marker - Optional custom marker rendered for each :item. Receives the current item slot attrs as the slot argument.

For fully custom rows, render activity_item/1 inside activity/1.

Accessibility

  • Renders an ordered list with a default aria-label="Activity".
  • Default markers and connector lines are decorative.
  • Pass your own aria-label or aria-labelledby when the surrounding page needs a more specific accessible name.

Summary

Functions

activity(assigns)
activity_item(assigns)

Functions

activity(assigns)

Attributes

  • compact (:boolean) - Uses compact spacing. Defaults to false.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id", "aria-label", "aria-labelledby"].

Slots

  • item - Accepts attributes:
    • status (:string) - Item status. Must be one of "pending", "running", "complete", or "error".
    • id (:string) - Optional DOM id.
    • class (:any) - Additional classes for the item.
  • marker - Custom marker rendered for each item.
  • inner_block - Custom activity items rendered with activity_item/1.

activity_item(assigns)

Attributes

  • id (:string) - Optional DOM id. Defaults to nil.
  • status (:string) - Item status. Defaults to "pending". Must be one of "pending", "running", "complete", or "error".
  • class (:any) - Additional classes for the item. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • marker - Custom marker for this item.
  • inner_block (required) - Activity item content.