Sticky Action Bar

When to use it

Use it for the Pay, Save or Continue button of a long form or checkout on a phone.

Do not use it for short forms that fit the screen (put the button under the fields) or for navigation (use a Tab Bar).

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @tealmac-pro/sticky-action-bar
Copy

Usage

Props

Keyboard

• Tab: moves to the bar after the last field.

Accessibility

• A named region so the bar can be found by landmark navigation.
• The bar lifts above the on-screen keyboard using the Visual Viewport API, so the main action is never covered while typing.
• It is placed after the form in the DOM so the tab order ends on the action.
• The lift transition is removed with prefers-reduced-motion.

Testing

The component ships with a Testing Library test (sticky-action-bar.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.