Commerce

Add to cart

AddToCartStateIcon

Shows the lifecycle of adding an item to a cart.

States

4 total

Add to cart

Ready to add to cart.

Add to cart

"idle"

Ready to add to cart.

Adding to cart

"adding"animated

Adding to cart is in progress.

Added to cart

"added"

Added to cart successfully.

Add to cart failed

"error"

The add to cart action failed.

Implementation

Pass your current state.

The component stays presentational. Your application remains in control of async work and business logic. The state prop is a TypeScript string literal union — pass an invalid state and you'll get a type error at build time.

Source: Lucide
License: ISC
States: idle · adding · added · error

example.tsx

import { AddToCartStateIcon } from "@stateglyph/react";
<AddToCartStateIcon state="idle" decorative />