Cart Close Button

A clickable element that closes the cart overlay by firing the Butter Cart Close event.

Last updated

August 14, 2026

How to use

Most cart close buttons don't need this component: for a button a customer taps to close the cart, connect Framer's native Close Overlay action to any button — done. Add Cart Close Button only when something other than a tap should close the cart, like a Recipe closing the overlay automatically. One instance per cart is enough.

Placed directly in the Cart Overlay:

Place the component inside your Cart Overlay.
With it selected, click Interactions and connect Close Overlay.

Nested inside a component you've built:

With Cart Close Button selected inside your component, click Interactions and click New Event — name it anything you'll recognize, like Close.
Select your component where it sits inside the Cart Overlay, click Interactions, and connect Close Overlay to that event.

When to use

Cart Close Button is the counterpart to Cart Trigger: Cart Trigger opens the cart overlay, this closes it. Its job is to give Butter a way to close the cart programmatically — most commonly a Recipe that closes the overlay after an action runs — while a standard tap-to-close button needs only Framer's native Close Overlay action.

More than one close control

You only need one instance of Cart Close Button per cart. For additional close buttons, use Framer's native Close Overlay action on the extras instead of adding more instances.