Anchor

A layout component used to position an element relative to the corner of another element.

Import#

import { Anchor } from '@volue/wave-react';

Anchor is a compound component that consists of multiple parts:

Anchor: The wrapper that acts as a reference point for Anchor.Target.
Anchor.Target: The target element placed relative to the corner of the anchoring element.

Examples#

Basic#

Anchor simplifies positioning target element to one of the corners of anchoring element. This is useful for positioning notification labels, avatar statuses, and similar cases.

Placement#

By default, target element sits on the top-end corner of the anchor element that it's attached to. Use the position property to move the target to any corner of the anchor.

Rather than left and right, we use start and end values for horizontal positioning, since they are flow-relative and depend on the writing mode or direction.

Inset#

Use the inset property to fine-tune the position of the target relative to the anchor element that it's attached to.

Value of the inset property corresponds to the inset CSS property, so all CSS length values are possible as well as referencing spacing scale values.

If your anchor-wrapped element has a circular shape, the target won't cover the element's visible area by default. You can fix this by moving the target closer to the anchor center by modyfing the inset.

If your anchor-wrapped element is an icon, you can apply inset to nudge the target closer to the icon center.

If a requirement is to push the target further away from the icon, simply apply negative inset.

API Reference#

Anchor#

Prop	Type	Default
`as`	`enum`	`span`
`css`	`StitchesCss`	No default value

Anchor.Target#

Prop	Type	Default
`as`	`enum`	`span`
`css`	`StitchesCss`	No default value
`position`	`enum`	`"top-end"`
`inset`	`StitchesCss['insetInlineStart']`	`0`