BlockUI

Overlay that blocks its content

For an area that is mid-operation and must stay visible but untouchable — a report re-running, a form saving, a table refreshing. The content is made inert (unreachable by mouse, keyboard and screen reader) under a 60% scrim with a spinner; if focus was inside, it parks on the overlay and returns when blocked goes false; focus elsewhere on the page is left alone. A hidden status region says label ("Busy") while blocked, so screen readers hear it either way. Content that isn't there yet is Skeleton's job; a page-level, non-blocking signal is LoadingBar.

#indicator replaces the spinner (a message, a progress bar). fullscreen fixes the overlay over the whole viewport — the page, not an open <dialog>, which lives in the top layer above it; to block a dialog, put the BlessBlockUI inside it. Only the slot goes inert, so for fullscreen wrap the app root — otherwise the page under the overlay is still reachable with Tab.

Basic

Weekly report

Viewers 12,480 · Completion 71% · Shares 3,112

<script setup lang="ts">
import { ref } from "vue";
import { BlessBlockUI, BlessButton, BlessPanel } from "blessing-ui";
const busy = ref(false);
function rerun() {
  busy.value = true;
  setTimeout(() => (busy.value = false), 1500);
}
</script>

<template>
  <div class="col" style="max-width: 360px">
    <BlessBlockUI :blocked="busy">
      <BlessPanel title="Weekly report">
        <p style="margin: 0 0 8px">Viewers 12,480 · Completion 71% · Shares 3,112</p>
        <BlessButton size="sm" variant="outline">Export</BlessButton>
      </BlessPanel>
    </BlessBlockUI>
    <div class="row">
      <BlessButton size="sm" @click="rerun">Re-run report</BlessButton>
    </div>
  </div>
</template>

Usage

import { BlessBlockUI } from "blessing-ui";

API

Props

Name	Type	Default	Description
blocked	boolean	—
fullscreen	boolean	—
label	string	"Busy"

Slots

Name	Scope	Description
default	—
indicator	—