FloatingArrow

Renders a customizable <svg> pointing arrow triangle inside the floating element that gets automatically positioned.

import { FloatingArrow } from '@skeletonlabs/floating-ui-svelte';

Usage

import { arrow, useFloating, FloatingArrow, autoUpdate, offset } from '@skeletonlabs/floating-ui-svelte';

let arrowRef: HTMLElement | null = $state(null);

const floating = useFloating({
	get middleware() {
		return [
			offset(10),
			arrowRef && arrow({ element: arrowRef })
		];
	}
});

svelte

<!-- Reference Element -->
<button bind:this="{floating.elements.reference}">
	Reference
</button>

<!-- Floating Element -->
<div
	bind:this="{floating.elements.floating}"
	style="{floating.floatingStyles}"
	class="floating"
>
	<div>Floating</div>
	<FloatingArrow
		bind:this="{arrowRef}"
		context="{floating.context}"
		classes="fill-surface-500"
	/>
</div>

Props

`ref*`	Bound element reference. HTMLElement \| null -
`context*`	The context object returned from useFloating(). FloatingContext -
`width`	The width of the arrow. number 14
`height`	The height of the arrow. number 7
`tipRadius`	The radius (rounding) of the arrow tip. number 0 (sharp)
`staticOffset`	A static offset override of the arrow from the floating element edge. Often desirable if the floating element is smaller than the reference element along the relevant axis and has an edge alignment (start/end). string \| number \| null undefined (use dynamic path)
`d`	A custom path for the arrow. Useful if you want fancy rounding. The path should be inside a square SVG and placed at the bottom of it. The path is designed for the 'bottom' placement, which will be rotated for other placements. string "black" (browser default)
`fill`	The color of the arrow. string xxx
`stroke`	The stroke (border) color of the arrow. This must match (or be less than) the floating element’s border width. string "none"
`strokeWidth`	The stroke (border) width of the arrow. number 0

Utility Classes and Styles

Provide arbitrary utility classes using the standard attribute.

svelte

<FloatingArrow class="fill-white" />

Compare

Compare to Floating UI React.