AI button

The resting state is quiet: a hairline gradient ring at reduced strength and a low glow. Hover widens the ring to full strength and raises the glow; the ring turns on its own uneven cadence, drifting and settling rather than ticking round at one rate. On mount it lights rather than arriving: the glow blooms out of the corner and the ring fades up a beat behind it.

The label names the conversation, not the technology. Any Material Symbol works as the leading icon.

Two sizes on Button’s control scale, so the two components sit together without negotiation.

Disabled drops to 0.4 opacity and pauses the rotation. Under reduced motion the ring and glow stay put and only the turning stops.

With state, the button reports what the agent behind it is doing, in AgentStatus’s vocabulary. The label never changes; the icon carries the state. Thinking and working swap the icon for the agent mark, a square of dots sized exactly to the icon, and spin the ring faster. Waiting shows the mark breathing in the warning colour with the ring at rest, because the next move is yours. Done and error turn the whole button to their status colours, with the mark filled solid in green or red for a beat, then the resting look returns. The button stays clickable throughout, so a click can open the conversation to watch the work.

When the agent stops to ask, request puts what it needs in a glass panel at the button, so the question appears where the person is already looking. Any content works; an InterruptCard approval is the usual one. The panel opens each time the state becomes waiting. Escape or a click on the button folds it away, the waiting mark stays, and another click brings it back. Run the task, then answer the card.

With an href it renders as an anchor, for entry points that navigate to an AI surface rather than opening one in place.

With a summary, hovering the button summons a frosted glass panel: the gradient sweeps once around its border, skeleton lines think for a beat, and a pre-written summary types itself in, once. Prompt chips launch the conversation mid-answer. The button and panel share one hover zone, so the pointer can travel between them freely; summaryPinned holds it open for callers with their own reveal signal, and summaryPlacement flips it below the button. Hover the button to try it; the site’s own chat button does the same on every page that carries the shared chrome.