WorkingEdge
StableA calm moving ring in the AI colour around a surface, shown only while the AI is working on it.
Also known as working glow, busy indicator, activity border
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Around a card
Refund request
Aero Home, Aero 12 blender, ₹2,340.
const [active, setActive] = useState(true);
<WorkingEdge active={active}>
<div className="rounded-card border border-line bg-surface p-4">
<p className="text-body leading-5 font-medium text-fg">Refund request</p>
<p className="mt-1 text-body leading-5 text-fg-muted">Aero Home, Aero 12 blender, ₹2,340.</p>
</div>
</WorkingEdge>
<Button size="sm" variant="secondary" onClick={() => setActive((a) => !a)}>{active ? "Stop" : "Start"}</Button>Press Stop and Start. The ring fades in while the AI works and fades out quickly when it stops. The card does not move.
When to use it
Marks the one surface the AI is working on right now, so people know where to look and what may change. The ring is tied to real work and stops when the work stops.
Made of: Wrapper · Surface (children) · Ring · Live region (hidden)
Use it for
- A draft card the AI is writing or rewriting.
- A form field the AI is filling in.
- A panel the AI is updating after a request.
Not for
- Saying what step the AI is on: use StatusTicker.
- A placeholder before content exists: use Skeleton.
- Showing that the AI is present but idle: use AIPresence.
- Asking a person to act on something: use AttentionDot.
Do and avoid
Do
- Show it on the one surface the AI is changing.
- Turn it off the moment the work ends or fails.
- Pair it with a StatusTicker or a message that says what is happening.
Avoid
- Do not leave it on as decoration.
- Do not put it on several surfaces at once for one task.
- Do not use it to ask a person to act. That is amber, not the AI colour.
- Do not use it on ordinary controls that the AI is not changing.
On a phone
- The ring is drawn over the edge of the surface, so the surface keeps its size and the layout does not shift on a narrow screen.
- The ring ignores touch, so taps reach the card or field underneath as normal.
- The wrapper is a block that follows the width of its parent, so it fits one-column phone layouts.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| activerequired | boolean | none | True only while the AI is really working on this surface. The ring shows while true. |
| childrenrequired | ReactNode | none | The surface the ring goes around, such as a card or a field. |
| label | string | "AI is working on this" | Said once by screen readers when active turns true. |
| radius | "card" | "overlay" | "control" | "field" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "card" | Corner of the ring. Match the corner of the surface inside. The role names (card, overlay, control, field) follow the shape setting. |
| className | string | none | Classes for the wrapper. |
| ...rest | HTMLAttributes<HTMLDivElement> | none | Other attributes go on the wrapper div. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one WorkingEdge switches all of this from its properties panel, across 24 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Active | active | On or off |
| Radius | radius | Card, Overlay, Control, Field, SM, MD, LG, XL, 2xl, 3xl, 4xl, Full |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- inactive
- With active false the ring is hidden and the surface looks as it does on its own.
- fading out
- When active turns false the ring fades out in the fast duration.
- reduced motion
- With reduced motion on, the ring is a still solid line in the AI colour with no turning highlight.
- forced colours
- In forced colours mode the ring is a plain border in the system text colour.
Tokens
Change one of these and every part that uses it follows.
--lime--fg--focus-width--dur-base--dur-fast--ease-arrive--ease-in--radius-2xl
Built in
- The ring is aria-hidden and ignores the pointer, so it never takes focus or blocks a tap.
- A visually hidden polite live region says the label when active turns true, and is emptied when it turns false.
- Under reduced motion the ring is still and solid, with no turning highlight.
- In forced colours mode the ring is a plain border in the system text colour.
- The ring fades out in the fast duration when active turns false.
What you need to do
- Set active from the real state of the work, and turn it off as soon as the work ends or fails.
- Give a label that names the work, such as AI is writing the draft, when the default is too vague.
- Tell people what changed when the work ends, for example with a StatusTicker or a message.
- Match radius to the corner of the surface inside, so the ring sits on its edge.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide