EXTENDED UI

BlockUI

Block a button, a card, a section or the page while work happens — with the right message, never longer than needed.
THEME
DENSITY
01

Playground

What to block, how it looks, what it says, when it shows
Invoices4 invoices · editable
AV-2026-042Nordic Thread€19,718Draft
AV-2026-041Kaya Ceramics€9,400Sent
AV-2026-040Fjord Outdoor€5,210Overdue
AV-2026-039Lumen Coffee€2,017Paid
SUMMARY€48,600outstanding · 3 invoicesOutside the card
REQUEST
RESULT
Blocked from 300 ms to 2.5 s
<BlockUI blocking={isSaving} target="card" overlay="dark" opacity={0.55} blur message="Saving invoice…" delay={300} minDuration={400} > <InvoiceCard /> </BlockUI>
Settings
BLOCK
OVERLAY
Dim 55%
CONTENT
SHOW AFTER · AUTO-UNBLOCK
02

Variants

Six blocks used across Avava — each one runs
Form · Savebutton keeps its width
KPI · Refreshold numbers stay visible
REVENUE · 30 DAYS€72,900▲ 12% vs last 30 days
Table row · Synconly that row is blocked
NTSpring 27 campaignSynced 2 h ago
KCWebsite v2Synced yesterday
FOParka lookbookSynced 3 d ago
Upload panelprogress · Cancel
⇪Drop photos into SelectsJPG, RAW, up to 2 GB
Whole page · Publishfixed · brand mark · steps
Only for actions that change everything on the page. Steps are spelled out so people know it isn’t frozen.
Read-only lockpermanent · explain · ask
AV-2026-038€2,017.00Lumen Coffee · October retainer
🔒 Invoice is lockedPaid Oct 12 — edits need approval.
03

Behaviour

Queues, errors, long waits and nested blocks
Queuestays until the last one
CLIENTNordic ThreadFire both — the block waits for the slower one
Error → Retrythe block becomes the message
LINE ITEMSShoot days × 2 · €8,400Retouching × 24 · €4,320
Taking longafter 10 s (4 s here)
REPORTQ4 revenue by clientAll clients, Oct–Dec
Nestedcard blocked · dialog inside works
PROPOSALSpring 27 · €38,600
04

Rules & a11y

Markup, checklist and what to use instead
Markup
<section aria-busy="true">
  <div inert>…the form, table, buttons…</div>
  <div class="blocker" role="status" aria-live="polite">
    <span class="spinner" aria-hidden="true"></span>
    Saving invoice…
    <button>Cancel</button>
  </div>
</section>
Checklist7 of 8 checked
BLOCKUIEditing that region now would cause a conflict or lose data.Saving a form, syncing a row
BUTTON SPINNEROnly the action is busy — the rest can stay usable.Send, Pay, Publish
SKELETONContent is loading for the first time — there’s nothing to protect.Opening a list
MODALThe user must decide something before continuing.Discard changes?
DO✓Block the smallest region that protects the data✓Keep old content visible under a light dim✓Say what’s happening — and change the message after ~10 s✓Offer Cancel on anything over a few seconds✓Turn the block into ✓ or an error with Retry
DON’T✕Block the whole page for a card update✕Leave a block up with no message or exit✕Let clicks or Tab reach the blocked controls✕Flash a block on requests under 300 ms✕Stack two blocks on the same region