Motion UIComponentsComponent

Arrow link

A read-more link whose trailing arrow slides forward on hover.

API reference

Components

`<ArrowNudgeActiveProvider />`

Supplies active to descendant ArrowNudge instances.

`<ArrowIcon />`

Bare right-arrow glyph in currentColor.

`size?`

number = 16

The glyph's width and height in px. Defaults to 16.

`className?`

string

Merged onto the <svg>.

`<ArrowNudge />`

Trailing arrow nudge for composing inside a larger interactive element.

`size?`

number

Arrow glyph size in px. Defaults to 16.

`className?`

string

Merged onto the wrapping motion.span.

`active?`

boolean

Explicit active override. Omit to read from ArrowNudgeSurface.

`<ArrowNudgeSurface />`

motion.a wrapper that drives every ArrowNudge inside on hover and focus.

`<ArrowLink />`

Self-contained ghost link with trailing arrow nudge.

`children?`

ReactNode

The link label.

`href?`

string

The destination.

`tone?`

ArrowLinkTone = "muted"

Which semantic colour the link reads. Defaults to muted.

`target?`

string

Anchor target.

`rel?`

string

Anchor rel.

`onClick?`

() => void

Click handler.

`className?`

string

Merged onto the <a>.

`ref?`

Ref<HTMLAnchorElement>

Ref to the underlying anchor.

Hooks

`useArrowNudgeActive`

Hover/focus wiring for a block that drives descendant ArrowNudge instances.

useArrowNudgeActive(): void

Featured in

See the arrow link composed into full sections.

Feature bentoAn example of a staggered feature bento with scroll-triggered reveals and considered hover micro-interactions in Motion for React.