SaveStatus
Client island: the quiet persistence signal an editor shows beside its publish button.
SavingSaving…SavedSavedEditedFailedFailed
View code
<SaveStatus id="post-status" state="saving" labels={labels} />
<SaveStatus id="post-status" state="saved" labels={labels} />
<SaveStatus id="post-status" editedAt={post.updatedAt} labels={labels} />
<SaveStatus id="post-status" state="failed" form="post-form" labels={labels} />
// Beside it, publication carries its own state on the primary button:
<Button size="sm" disabled={!hasUnpublishedChanges}>Publish</Button>
<Button size="sm" isPending>Publishing…</Button>
<Button size="sm" disabled>Published</Button>
// An autosave drives the status from the client:
setSaveStatus("post-status", "saving");
let response = await fetch(autosaveUrl, { method: "POST", body: new FormData(form) });
setSaveStatus("post-status", response.ok ? "saved" : "failed");Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { SaveStatus } from "@sdxc/ui/app";Renders the status. Saving, Saved and Failed are announced through a polite live region; the ticking edit time sits outside it, so a screen reader hears each outcome once. Pair it with a publish button whose label carries publication's own state.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.