Positioned

Absolutely positioned container for overlay elements like badges and indicators.

Basic Usage

import { Positioned } from '@multinaire/ui';

<Container>
  <Photo source={imageSource} />
  <Positioned position={{ top: 8, right: 8 }}>
    <Badge count={5} />
  </Positioned>
</Container>

Props

Prop	Type	Default	Description
position	SpacingProps	—	Position offsets (left/top/right/bottom). Accepts a number for all sides or an object for per-side control
margin	SpacingProps	—	Margin applied to the absolutely positioned wrapper
style	ViewStyle	—	Additional styles applied to the absolutely positioned wrapper

SpacingProps

// Single value (all edges)
position={8}

// Horizontal/Vertical
position={{ horizontal: 8, vertical: 16 }}

// Individual edges
position={{ top: 8, right: 8 }}

Examples

Notification Badge

<Container style={{ position: 'relative' }}>
  <IconButton icon="Bell" onPress={openNotifications} />
  <Positioned position={{ top: 0, right: 0 }}>
    <Container
      width={16}
      height={16}
      borderRadius={8}
      backgroundColor="error"
      justifyContent="center"
      alignItems="center"
    >
      <Typography type="caption" color="onPrimary">3</Typography>
    </Container>
  </Positioned>
</Container>

Online Indicator

<Container style={{ position: 'relative' }}>
  <Avatar source={user.avatar} size={48} />
  <Positioned position={{ bottom: 0, right: 0 }}>
    <Container
      width={12}
      height={12}
      borderRadius={6}
      backgroundColor="success"
    />
  </Positioned>
</Container>

Corner Actions

<Card style={{ position: 'relative' }}>
  <CardContent />
  <Positioned position={{ top: 8, right: 8 }}>
    <IconButton icon="More" onPress={showMenu} />
  </Positioned>
</Card>

Floating Label

<Container style={{ position: 'relative' }}>
  <Photo source={product.image} aspectRatio="1:1" />
  <Positioned position={{ bottom: 0, left: 0, right: 0 }}>
    <Container backgroundColor="surface" padding={8}>
      <Typography>{product.name}</Typography>
    </Container>
  </Positioned>
</Container>