Sticky Checkout Bar

ProNew

A cart screen whose bottom bar shows the total and a Checkout button, stays above the home indicator, shows a disabled reason when the cart is empty and updates the total as quantities change. Use this when a phone cart or order summary scrolls and the main action must always be visible.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when a phone cart or order summary scrolls and the main action must always be visible.

Do not use it for short pages where the button fits under the content.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`lines`	`CartLine[]`	`required`	`{ id, name, price, quantity }`.
`onCheckout`	`() => void`	`required`	Called by Checkout.

Accessibility

The bar is a named region; the total is a polite status that changes when quantities do.
Checkout is disabled when the cart is empty and the reason is text beside it ("Add something to check out").
Quantity steppers are buttons named after the line.

Testing

The pattern ships with a Testing Library test (sticky-checkout-bar.test.tsx) that drives it through roles and the keyboard.