Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Shimmer
  3. Usage

Shimmer

Usage

Shimmer is text for in-progress work, such as a streaming "Thinking…" or "Reasoning" label. A wide highlight band sweeps across a dimmed label while it is active; inactive, it is plain text at the subtle tier. An optional glyph sweeps in phase with the label.
Resting tier
base picks the tier the label rests at between sweeps; the band always lifts it to the default foreground.
  • ShimmerBase.Dim (default): a loading placeholder. The label dims to the disabled tier, which is under the AA text floor, so use it only when the surrounding UI carries the meaning.
  • ShimmerBase.Readable: the label rests at the subtle tier, the one a resting label uses, so it keeps AA text contrast at every point of the sweep. Use it for a label someone reads, such as Reasoning's "Thinking…". The band lifts it less than Dim does.
When to use
  • The label of a reply or a step that is under way: "Thinking…", "Reasoning", "Working on your request…".
  • Any label that should look alive while a streaming state lasts, then settle with no layout change.
When not to use
  • A spinner with or without text: use Loader.
  • A placeholder for content that will fill a layout: use Skeleton.
  • Anything that carries information only through the sweep. The sweep is decoration; the text is the content.
Composition
  • The root is an inline span, so Shimmer is valid inside a paragraph and in running text.
  • The label is Text. Active, it paints a clipped gradient on the glyphs, from the disabled tier to the default foreground; inactive, it is Foreground.Subtle.
  • icon is a Glyph. It stays when active is false, so toggling active moves nothing.
  • type is a TextType. The default is body medium (13px).
  • Shimmer adds no role and no live region. The owner of the pending state announces it (Loader, or the log that holds the message).
Motion
The sweep is one linear infinite period of eight --duration-slower steps (4 seconds), shared by the label and the glyph. The band is 1.2 label widths wide: it travels a tile three label widths long, so the label rests at the dim base between passes. It moves along the inline axis, so a right-to-left label sweeps from its own start. Chromatic captures the first frame, with the band centered on the label. The sweep stops, and the label paints the default foreground, under reduced motion (the system setting or the app preference), under prefers-contrast: more, and under forced-colors: active.
Previous
Send Button / Accessibility
Next
Shimmer / API and Development
On this page
Resting tier
When to use
When not to use
Composition
Motion