Ring nativelite

A circular progress ring for a fraction, sized like an icon.

Children: none

Preview

Loading the renderer…

valuerequired

size

tone

label

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "start",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Ring",
          "value": 0.62,
          "tone": "primary"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Ring rendered by the React renderer on Web — **Web** React

Ring rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Ring rendered by the Compose renderer on Android — **Android** Compose

Ring rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-ring, painted by each native renderer.

Variants

size · sm

size · default

size · lg

tone · neutral

tone · primary

tone · success

tone · warning

tone · danger

tone · info

Props

Prop	Type	Default	Description
`value`requiredbind	`number`	–	The fraction 0 to 1.
`size`	`sm \| default \| lg`	`"default"`	Diameter class.
`tone`	`neutral \| primary \| success \| warning \| danger \| info`	`"primary"`	The arc colour tone.
`label`	`string`	–	An accessibility label.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: progressbar
Semantics: progressbar (value 0..1 as percent)

Not focusable; no keys.

Theming

Recipe parts: Ring/rootRing/trackRing/fillRing/label
Keyed by: sizetone:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Context ring

EXP-877: how full the agent's context window is, as a 16px radial where the context pill used to be — and the trigger of the usage overlay the session already had.

The arc is a stroked circle rotated a quarter turn, the track the same circle at 20% opacity, and the tone is the session's, not the ring's: the app maps its own thresholds onto normal / warning / danger and passes one in. A run nothing has measured renders NOTHING unless `showEmpty` says the run has other usage worth opening.

Webok

ContextRingpackages/ui/src/context-ring.tsx

ringGeometry + RING_TONE_CLASS ship with it; the app's lib/context-ring.ts derives percent and tone

iOSok

ContextRingapps/ios/ExpUI/Sources/ContextRing.swift

Androidok

ContextRingapps/android/app/src/main/java/com/exponential/app/ui/components/ContextRing.kt

Desktopok

usage_sheet::context_ringapps/desktop/crates/ui/src/usage_sheet.rs

mounted by steer_viewer::render_context_ring; the percentage comes from usage_bar::context_percent

Sub-issue progress ring

EXP-1097: the completion ring that leads the issue detail's Sub-issues band — done of total as an arc over a 20% track, the SAME 16-unit box, 2-unit stroke and track as the context ring (`ringGeometry`), drawn at 14px and painted in the team's COMPLETED status colour.

The band reads ring · "Sub-issues" · `done/total` · `+` over flat rows (`lib/issue-relations-view.ts`, fixture-locked ×4).

Webok

ProgressRingpackages/ui/src/progress-ring.tsx

the Sub-issues band in components/issue-relations-card.tsx mounts it

iOSok

ProgressRingapps/ios/ExpUI/Sources/ProgressRing.swift

EXP-1097: IssueSubIssuesSection (IssueRelationRows.swift) leads its band with it

Androidok

SubIssueProgressRingapps/android/app/src/main/java/com/exponential/app/ui/issue/RelationsSection.kt

EXP-1097: SubIssuesSection leads its band with it

Desktopok

issue_relations::render_sub_issuesapps/desktop/crates/ui/src/issue_relations.rs

EXP-1097: a ProgressCircle on the context ring's geometry, the COMPLETED status colour