Toolbar Status
A small button that takes the place of an action once it finishes. It says what happened in a word or two, announces the full message, and opens a popover with the details and a follow-up action.
Usage
import { Button } from "@tulipfarm/sprout/button";
import { ToolbarStatus } from "@tulipfarm/sprout/toolbar-status";
const failed = note.startsWith("Export failed");
<ToolbarStatus
label={failed ? "Export failed" : "Export result"}
message={note}
error={failed}
>
<Button variant="outline" size="sm" disabled={busy} onClick={run}>
{failed ? "Retry export" : "Export again"}
</Button>
</ToolbarStatus>label is the button text and the popover title. Keep it to two words so it fits a narrow slot; longer labels end in an ellipsis. message is the full explanation. It shows in the popover and screen readers hear it as soon as it changes.
Set error for a failure. The button turns destructive, the title turns red, and the message is announced with role="alert". Otherwise the button is outline and the message uses role="status". The button is always the small size.
children sit under the message, usually one small outline button to run the action again. Pass nothing for a message-only status. defaultOpen opens the details once when the status mounts. The popover aligns to the end of the button.
Outcomes
Success, capped, cancelled, and failed exports, a busy table that disables the follow-up, a message-only save, and a failed save that opens on mount.
Outcomes
Each row is a status the app shows after an action. Open one to read the details.
Selected rows
In a bulk action bar the status replaces Export selected after the export. On a narrow bar the other actions move into an Actions menu. Selection, export, and delete in these examples are sample code. The package only draws the status.
Accessibility
The live message sits outside the popover, so it is announced even while the popover is closed. The button opens with Enter or Space, Tab moves into the action, and Escape closes the popover and returns focus to the button. The popover fades in over 120ms; reduced motion turns it off.