Freezes a region while something posts: a translucent veil with a spinner and a short message over a card, a table or a form. Set blocked from app state when the request starts and clear it when it settles. The veil covers only what it wraps; there is no scroll lock and no focus trap.
blocked is a plain boolean from app state: up when the request starts, down when it settles. While blocked the host carries aria-busy and the content goes inert, so a keyboard user cannot Tab past the veil into the form it guards. Going inert also moves focus to the body, so a user mid-form loses their place.
Journal entry JE-0331
Dr 6100 Rent $6,000.00 Cr 1000 Operating Checking $6,000.00
Fill the veil slot to put something else under the veil; a determinate sui-progress-bar is the case it exists for. The slot replaces the default spinner, message is not read while it is filled, and the slot sits outside the inert region, so its content stays reachable while the content underneath is not.
340 of 1,200
Journal entry JE-0331
Dr 6100 Rent $6,000.00 Cr 1000 Operating Checking $6,000.00
The veil is absolute inside the wrapper, so it covers exactly the region handed to it: a table, a card, a form column. Blocking a region taller than the viewport centers the spinner on the region, not the screen; wrap the app shell if the whole page has to freeze.
Shows the veil. While true the host carries aria-busy="true" and the wrapped content is inert, so it leaves the tab order as well as the pointer's reach. A browser moves focus to the body when the element holding it goes inert, so a user mid-form loses their place; nothing here catches that.
message
message
stringstring | undefined
Caption under the spinner. Empty string hides it. Ignored when the veil slot is filled.
Slots
Slot
Description
(default)
The content being blocked (a card, a table, a form).
veil
Replaces the default spinner and message on the veil; a determinate sui-progress-bar is the case it exists for. It sits outside the inert region, so its content stays reachable. Name it yourself: message is not read when this is filled.
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.