Motion UIComponentsComponent

Add to basket

A product image that arcs into the basket icon, with a recoil and ripple on arrival.

API reference

Components

`<AddToBasketImage />`

Wraps product artwork that flies into the basket.

`children?`

ReactNode

Product artwork that flies into the basket.

`className?`

string

Merged onto the wrapping element.

`ref?`

Ref<AddToBasketImageHandle>

Imperative handle driving the flight.

`<AddToBasketTarget />`

Wraps the basket so it can take the hit and ripple on impact.

`children?`

ReactNode

Basket icon or any landing element.

`className?`

string

Merged onto the wrapping element.

`ref?`

Ref<AddToBasketTargetHandle>

Imperative handle driving the recoil.

`<AddToBasketButton />`

Styled trigger with theme snap hover/tap feel.

`children?`

ReactNode = "Add to basket"

The button's visible label.

`className?`

string

Merged onto the button element.

`disabled?`

boolean

Disable while an add is in flight.

`onClick?`

() => void

Click handler, typically calls addToBasket.

Functions

`addToBasket`

Runs the full fly-to-basket choreography. Resolves true at the landing beat.

addToBasket(options: AddToBasketOptions): Promise<boolean>

`image`

AddToBasketImageHandle | null

The AddToBasketImage handle.

`basket`

AddToBasketTargetHandle | null

The AddToBasketTarget handle.

`direction?`

ArcDirection = "cw"

Which way the flight arc bends.

Featured in

See the add to basket composed into full sections.

Add to basket buttonAn example of an add-to-basket button that flies the product into the basket along a curved arc with a spring recoil, in Motion for React.