OverlayArrow

A small pointer glyph anchoring an overlay surface.

top

bottom

left

right

View code

{/* The surface owns the arrow, and the gap between the two is what the glyph
    reaches across, so the stacking order is what puts the trigger on the side the
    arrow faces. */}
<div mix={[vstack({ gap: 3, align: "center" })]}>
	<div mix={[relative(), p(3), rounded("lg"), bg("neutral.solid"), fg("neutral.onSolid")]}>
		<OverlayArrow placement="top" mix={[fill("neutral.solid")]}>
			<svg width={8} height={8} viewBox="0 0 8 8" aria-hidden="true">
				<path d="M0 0 L4 4 L8 0" />
			</svg>
		</OverlayArrow>
		top
	</div>

	<div mix={[is(10), bs(10), rounded("md"), border({ color: "neutral", width: 1 })]} />
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

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.