# OverlayArrow

> A small pointer glyph anchoring an overlay surface — a popover, a menu, a tooltip — visually back to the trigger it floats beside.

```ts
import { OverlayArrow } from "@sdxc/ui";
```

Renders a decorative pointer glyph, rotating to point back at the trigger
from whichever edge the overlay attaches to. `"left"`/`"right"` name a
physical viewport side, so the arrow keeps attaching there under any `dir`.

## Examples

```tsx
<Popover>
	<OverlayArrow placement="bottom">
		<svg width={12} height={12} viewBox="0 0 12 12">
			<path d="M0 0 L6 6 L12 0" />
		</svg>
	</OverlayArrow>
	{content}
</Popover>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `placement?` | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | Side of the trigger the overlay renders on. Defaults to DEFAULT_PLACEMENT. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Placement` | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | Side (and, for the four corner variants, alignment) of the trigger an overlay renders relative to. |