Imperative API
useStatusBar() returns show() and hide()
for event handlers and async flows. show is an idempotent upsert —
the entry auto-removes when the component unmounts.
Async save flow (assertive on error)
<StatusBarViewport mode="replace" ariaLive="assertive" />
tsx
function SaveButton() {
const sb = useStatusBar();
async function onClick() {
sb.show("💾 Saving…", { priority: 5 });
try {
await save();
sb.show("✓ Saved", { priority: 3 }); // same entry, updated in place
setTimeout(() => sb.hide(), 1600);
} catch {
sb.show("⚠️ Save failed", { priority: 0 }); // escalate to P0
}
}
return <button onClick={onClick}>Save</button>;
}