Float

A positioning component that floats its content at a specified position relative to its parent. Useful for badges, indicators, and notification dots.

Anatomy

<script>
  import { Float } from "@saas-ui/svelte/layout/float";
</script>

<div class="relative">
  <Avatar />
  <Float placement="top-end">
    <Badge>3</Badge>
  </Float>
</div>

Examples

Basic Accessibility

Basic float positioning with default top-end placement for badge or indicator overlays.

<Box class={placeholder}>
	<Float>
		<Circle size="xs" colour="red">3</Circle>
	</Float>
</Box>

Offsets Accessibility

Use offset, offsetX, or offsetY props to fine-tune the floating element position.

<HStack gap={8} align="center">
	<VStack gap={2} align="center">
		<Text size="xs">offsetX="-4"</Text>
		<Box class={placeholder}>
			<Float offsetX="-4">
				<Circle size="xs" colour="red">3</Circle>
			</Float>
		</Box>
	</VStack>
	<VStack gap={2} align="center">
		<Text size="xs">offsetY="-4"</Text>
		<Box class={placeholder}>
			<Float offsetY="-4">
				<Circle size="xs" colour="red">3</Circle>
			</Float>
		</Box>
	</VStack>
	<VStack gap={2} align="center">
		<Text size="xs">offset="4"</Text>
		<Box class={placeholder}>
			<Float offset="4">
				<Circle size="xs" colour="red">3</Circle>
			</Float>
		</Box>
	</VStack>
</HStack>

Placements Accessibility

All available placements: top-start, top-center, top-end, middle-start, middle-center, middle-end, bottom-start, bottom-center, bottom-end.

<HStack gap={8} class="flex-wrap" align="start">
	{#each floatPlacements as placement}
		<VStack gap={2} align="center">
			<Text size="xs">{placement}</Text>
			<Box class={placeholder}>
				<Float {placement}>
					<Circle size="xs" colour="red">3</Circle>
				</Float>
			</Box>
		</VStack>
	{/each}
</HStack>

With Avatar Accessibility

Common use case showing a notification badge floating on an avatar component.

<Box class="relative inline-block">
	<Avatar
		size="lg"
		shape="rounded"
		src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
		name="David Wilson"
	/>
	<Float placement="bottom-end">
		<Badge size="sm" variant="solid" colour="teal">New</Badge>
	</Float>
</Box>

Props

Prop	Type	Default	Description
`placement`	`top-start \| top-center \| top-end \| bottom-start \| bottom-center \| bottom-end \| middle-start \| middle-center \| middle-end`	`top-end`	The placement of the indicator.
`offsetX`	`text`	-	The x offset of the indicator.
`offsetY`	`text`	-	The y offset of the indicator.
`offset`	`text`	-	The x and y offset of the indicator.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.