Function: LockedOverlay()

LockedOverlay(__namedParameters): Element | null

Defined in: LockedOverlay/LockedOverlay.tsx:154

LockedOverlay is a component for blocking and displaying locked features or restricted content within a specific container.

This component renders as an absolutely positioned overlay that blocks the parent container's content. The parent container must have position: relative for proper positioning.

Unlike a modal, this component blocks only its parent container, not the entire viewport, making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.

Parameters

Parameter	Type
__namedParameters	LockedOverlayProps

Returns

Element | null

Examples

// Parent container must have position: relative
<Layout.Main sx={{ position: 'relative' }}>
  <LockedOverlay
    isOpen={isOpen}
    onRequestClose={() => setIsOpen(false)}
    header={{
      icon: "fluent:lock-closed-24-filled",
      title: "Premium Feature",
      description: "Available in Pro plan only",
      variant: "primary"
    }}
    actions={[
      {
        label: "Upgrade Now",
        icon: "fluent-emoji-high-contrast:sparkles",
        variant: "primary",
        onClick: handleUpgrade
      },
      {
        label: "Learn More",
        icon: "fluent:arrow-right-16-regular",
        variant: "accent",
        onClick: handleLearnMore
      }
    ]}
  >
    <Text>This feature is only available for Pro users.</Text>
  </LockedOverlay>
</Layout.Main>

// Blocking a specific section with custom zIndex
<Box sx={{ position: 'relative' }}>
  <LockedOverlay
    isOpen={isOpen}
    zIndex={10}
    header={{
      icon: "fluent:lock-closed-24-filled",
      title: "Feature Locked",
      description: "Unlock this feature"
    }}
  >
    <Text>Content here</Text>
  </LockedOverlay>
</Box>