AbsoluteCenter

Fills its parent absolutely (top: 0, bottom: 0, left: 0, right: 0) and centres its children. Use it for loading overlays, modal backdrops, and badge positioning.

Preview

import { AbsoluteCenter } from '@devraj-labs/vajra-ui-core';

// Loading overlay
<Box>
  {loading && (
    <AbsoluteCenter>
      <ActivityIndicator />
    </AbsoluteCenter>
  )}
</Box>

Usage

import { AbsoluteCenter } from '@devraj-labs/vajra-ui-core';

// Loading overlay
{loading && (
  <AbsoluteCenter>
    <ActivityIndicator />
  </AbsoluteCenter>
)}

API

Accepts all Box props except style, the component manages its own absolute-fill style internally.

The following styles are applied automatically and cannot be overridden via props:

{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }

To add a semi-transparent backdrop colour, render a sibling Box with position="absolute" and the desired background, or nest it inside AbsoluteCenter as a child.

Example