Converged prototype / Component State Library Every state, not just the happy path

Smash Balloon · Design prototype · Component states

One component, every state it can be in.

The converged pages show the happy path; this library shows everything else — each shared component rendered in all of its states, grounded in the real plugin sources under references/. Each state leads with the rendered component; triggers, actions, and code grounding sit behind a collapsed Spec toggle. Jump straight to any state from the chips below.

License Key

9 states

The canonical license component — one card anatomy, one heading, one subheading, everywhere.

01 Lite 02 Not activated 03 Activating 04 Active 05 Invalid 06 Expired 07 Grace period 08 Network error 09 Tier-limited

Base connection states, the same row flexing across 8 plugin families (tabbed), and the full legacy-baggage taxonomy.

Base B1 Connected B2 Empty B3 Connecting B4 Error B5 Re-auth Per-plugin Instagram Facebook Twitter/X YouTube TikTok Reviews Social Wall Threads Legacy L1 Shortcode feeds L2 Unremovable L3 Migrating L4 Migrated L5 Deprecated API L6 Data deleted

Save Bar

5 states

The sticky Save Changes affordance shared by every settings page.

S1 Clean S2 Unsaved S3 Saving S4 Saved S5 Failed
How to read a state

Every state leads with the rendered component (display fidelity, same markup and classes as the converged pages), headed by a compact state chip + one-line gist. Full spec text — trigger, allowed actions, and the code grounding — is collapsed behind a Spec toggle. A sticky rail on each page lets you jump to any state; an inferred flag marks the few states we could not ground in the plugin sources.