Feedback and overlays
The action band, the first-report status panel, the handoff modal, and how to show loading, empty, and error states without fuss.
#Action band
A single tinted band carrying the week’s one recommended action. It sits directly under the pulse strip on a store page, and beside the summary on a report. The label is fixed: This week’s action.
Code
<div class="action action-warn">
<span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg></span>
<div class="action-body">
<div class="label">This week’s action</div>
<div class="action-title">Restock the stoneware mug before Friday</div>
<div class="action-why">Four left, and it sold 30 a week on average.</div>
</div>
</div>Code
<div class="action">
<span class="action-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg></span>
<div class="action-body">
<div class="label">This week’s action</div>
<div class="action-title">Feature the linen throw on your homepage</div>
<div class="action-why">It is your top product and its conversion is up.</div>
</div>
</div>Use it when
- The one thing to do next, once per store page or report
- Amber for attention, teal when the news is good
Don’t use it when
- More than one per screen. If there are several things, pick the most valuable
- Errors or system messages. Use a form error or status panel
- Decoration or announcements
If a report has no action, omit the band on the store page and say No action recommended on the report page. Never invent one to fill the space.
#Status panel
Shown instead of numbers while a store waits for its first pack. It is honest and quiet: what is happening, when to expect it, and nothing to do.
#Your first pack is on the way
Store connected. We’ll email you when the digest is ready. Nothing to do until then.
Code
<div class="status-panel">
<div class="label"><span class="dot"></span>First report status</div>
<h3>Your first pack is on the way</h3>
<p class="desc">Store connected. We’ll email you when the digest is ready. Nothing to do until then.</p>
<div class="inset"><div class="line">Queued · first pack Monday</div><div class="when">Expected Sep 28 · covers prior week</div></div>
<span class="pill pill-warn">queued</span>
</div>Use it when
- A store is connected but no report has been generated
- The report failed and is being retried (say so in the status line)
Don’t use it when
- Anything with real numbers. Use the pulse strip
- Empty lists elsewhere. Use an empty state (below)
#Handoff modal
Any time the owner leaves Weekwright, for a store approval or for payment, show the handoff first. It says what will happen, offers three reassurances, and gives one primary action and a Cancel. Jargon stays out: no API, OAuth, or vendor names.
Code
<div class="overlay">
<div class="modal" role="dialog" aria-modal="true" aria-label="Continue to secure checkout">
<div class="modal-icon"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 11h12v9H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3"/></svg></div>
<h1>Continue to secure checkout</h1>
<p class="lead">You’ll leave Weekwright briefly to pay, then come back. We never ask for your card on our site.</p>
<div class="inset"><div class="plan-name">Weekwright</div><div class="plan-detail">First pack free. Then the founding price.</div></div>
<ul class="checklist">
<li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg> Payment details are entered on a secure checkout page</li>
<li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg> We never ask for your card on Weekwright</li>
<li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg> You’ll return here when you’re done</li>
</ul>
<div class="btn-row"><button type="button" class="btn btn-primary grow">Continue to secure checkout</button><button type="button" class="btn btn-secondary">Cancel</button></div>
</div>
</div><Handoff icon="lock" title="Continue to secure checkout" lead="You’ll leave Weekwright briefly to pay, then come back.">
<div className="inset">…</div>
<ul className="checklist">…</ul>
<div className="btn-row">…</div>
</Handoff>- The page behind stays visible but dimmed (
--color-overlay). The modal uses the largest radius and the larger shadow. - The primary button repeats the title, so the owner sees the same words they clicked.
- Use
role="dialog"andaria-modal="true". Move focus in, and return it to the trigger on Cancel.
Use it when
- Leaving for a vendor page: connecting a store, paying, managing billing
Don’t use it when
- Ordinary confirmations inside the product
- Marketing or upsell moments
#Inline messages
#Loading
Short, muted, and specific: Loading stores…. No spinners or skeleton charts for content that may not exist.
Code
<div class="loading-msg">Loading stores…</div>
<div class="error-msg" role="alert">We couldn’t load this report. Refresh the page, or contact support if it keeps happening.</div>#Errors
Say what went wrong and how to fix it. Do not apologize or blame. Use role="alert". The copy rules on Writing and copy give a pattern and examples.
#Empty
One calm line and the next step. A store without a pack is the status panel above. A list with nothing in it gets a sentence and, if there is a useful action, a single link.