ShimmerText
StableStatus text with a moving shine, for steps like "Searching the web…".
Also known as shimmer, loading text, status text
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Status step
Searching the web…
<ShimmerText>Searching the web…</ShimmerText>One line saying what the assistant is doing.
When to use it
One line of status text with a shine sweeping across it. The shine says the work is still going; the words say what the assistant is doing.
Use it for
- A step in progress, like "Searching the web…".
- Next to a small spinner when a step takes a while.
- A status line that you replace with the result when the step ends.
Not for
- The wait before you know what the assistant is doing: use TypingIndicator.
- A list of the steps the assistant has taken: use StepTimeline.
- Body text or headings.
Do and avoid
Searching flight prices…
Your flight lands at 9:40 and the hotel lets you check in from 2 pm. Bags are free up to 20 kg on this fare.
Do
- Write a short phrase that names the step, like "Reading 4 files…".
- Replace it with the finished text when the step is done.
- Show one step at a time.
- Keep it short enough for one line.
Avoid
- Do not use it for body text or headings.
- Do not leave it moving after the work has stopped.
- Only plain text works inside it, not other elements.
- Do not change its text color. The shine needs the default.
On a phone
- ShimmerText is inline text at 14px and wraps with the text around it on a narrow screen.
- The shimmer runs on a phone. It is a status line, so keep it short.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | string | none | The status text. Only strings are accepted. |
| className | string | none | Merged last. Use it to change size or spacing. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--fg-subtle--fg--animate-shimmer
Built in
- It is real text, so screen readers read it and people can select it.
- The shine stops for people who turn off motion in their system settings.
What you need to do
- Put it in an area that announces changes if people must hear each step. It does not announce itself.
- Never put the only copy of something important here. Part of the text is light and hard to read.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide