Components
Feedback & status
Alerts, badges, progress, and toasts — how the system communicates state back to the user.
Stable
Alerts
Renewal window openCoverage renews Dec 1 — quotes are due back from carriers by Nov 10.
Binder issuedCertificate of insurance sent to Acme Manufacturing Co.
Missing loss runUnderwriting needs 3 years of loss history to finalize the quote.
Policy expiredMeridian Health Group's professional liability policy lapsed Jun 12.
<div class="ws-alert ws-alert--warning">
<svg>...</svg>
<div><span class="ws-alert__title">Missing loss run</span>Details…</div>
</div>Badges & tags
Draft
New
Active
Pending
Expired
In review
<span class="ws-badge ws-badge--success"><span class="ws-badge__dot"></span>Active</span>Progress & loading
Application 68% complete
Fetching quote from carrier…
<div class="ws-progress"><div class="ws-progress__bar" style="width:68%"></div></div>
<div class="ws-spinner"></div>Toast
Click the button — a real toast will appear bottom-right and auto-dismiss.
<button data-toast-demo="Quote sent to underwriting.">Trigger toast</button>
<!-- site.js listens for [data-toast-demo] and renders a .ws-toast -->