MultinairePositioned

Absolutely positioned container for overlay elements like badges and indicators.

Basic Usage

import { MultinairePositioned } from '@multinaire/multinaire-design';

<MultinaireContainer>
  <MultinaireImage source={imageSource} />
  <MultinairePositioned position={{ top: 8, right: 8 }}>
    <Badge count={5} />
  </MultinairePositioned>
</MultinaireContainer>

Props

Prop	Type	Default	Description
position	SpacingProps	{ left: 0, top: 0, right: 0, bottom: 0 }	Position from edges
margin	SpacingProps	-	Additional margin
style	ViewStyle	-	Additional styles

SpacingProps

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

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

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

Examples

Notification Badge

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

Online Indicator

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

Corner Actions

<MultinaireCard style={{ position: 'relative' }}>
  <CardContent />
  <MultinairePositioned position={{ top: 8, right: 8 }}>
    <MultinaireIconButton icon="More" onPress={showMenu} />
  </MultinairePositioned>
</MultinaireCard>

Floating Label

<MultinaireContainer style={{ position: 'relative' }}>
  <MultinaireImage source={product.image} aspectRatio="1:1" />
  <MultinairePositioned position={{ bottom: 0, left: 0, right: 0 }}>
    <MultinaireContainer backgroundColor="surface" padding={8}>
      <MultinaireText>{product.name}</MultinaireText>
    </MultinaireContainer>
  </MultinairePositioned>
</MultinaireContainer>