# anchor-name

> Applies `anchor-name`, the *declaring* half of anchor positioning: it goes on the element anchored **to**, and positionAnchor points back at this name.

```ts
import { anchorName } from "@sdxc/u/layout";
```

Applies `anchor-name`, the *declaring* half of anchor positioning: it goes
on the element anchored **to**, and positionAnchor points back at
this name. The leading `--` is prepended — an anchor name is a dashed-ident.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.anchorName("tooltip-trigger")` | `css({ anchorName: "--tooltip-trigger" })` |
| `u.anchorName("menu-button")` | `css({ anchorName: "--menu-button" })` |

## Examples

### Basic example

Use `anchorName(name)` on the element other elements position against, then point them at it with `positionAnchor(name)`:

```tsx
<div mix={[relative(), center(), is(72), bs(32)]}>
	<button mix={[anchorName("help-button"), ...]}>Help</button>
	<div
		mix={[
			absolute(),
			positionAnchor("help-button"),
			positionArea("top"),
			mbe(2),
			p(1, 2),
			rounded("md"),
			bg("neutral.solid"),
			fg("neutral.onSolid"),
			text("xs"),
		]}
	>
		Opens the docs
	</div>
</div>
```

### Naming several anchors

Give each anchor its own name so every positioned element can pick the one it belongs to:

```tsx
<div mix={[relative(), center(), gap(16), is(96), bs(32)]}>
	<button mix={[anchorName("edit-button"), ...]}>Edit</button>
	<button mix={[anchorName("delete-button"), ...]}>Delete</button>
	<span
		mix={[
			absolute(),
			positionAnchor("edit-button"),
			positionArea("bottom"),
			mbs(2),
			...,
		]}
	>
		edit-button
	</span>
	<span
		mix={[
			absolute(),
			positionAnchor("delete-button"),
			positionArea("bottom"),
			mbs(2),
			...,
		]}
	>
		delete-button
	</span>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.anchorName("tooltip-trigger"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.anchorName("tooltip-trigger"))
```

## Signature

```ts
u.anchorName(name: string)
```