UI components · Actions
Bottom Action Bar
Also called: Sticky action bar, Footer toolbar, Sticky footer bar, Submit bar
A bar fixed to the bottom of the page or panel that holds the final actions for the task, like "Save" or "Place order." It stays visible however far you scroll.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd a sticky bottom action bar to this long form. Use position: sticky at the bottom of the content area, 64px tall, white background, a 1px top divider, and a subtle upward shadow, as wide as the content area. On the left, show a gray hint "3 unsaved changes." On the right, a regular "Cancel" button and a primary "Save" button (36px tall, 12px apart). Disable "Save" when nothing has changed. Add 80px of bottom padding to the page so the last field isn't covered, and on phones add env(safe-area-inset-bottom) too.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Bottom Action Bar is what you need.
Use Bottom Action Bar when
- Very long forms or settings pages, so users can save or cancel from anywhere
- Product detail, cart, and checkout pages on phones that need the buy or checkout button visible at all times
- After checking several records, to show the selected count and bulk actions at the bottom
Pick something else when
Short forms with only three to five fields. Just put the buttons at the end of the form.
Use insteadButtonSwitching between a few main pages
Use insteadBottom Tab BarSecondary actions used only now and then, which would take up screen space permanently
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
The fixed bar covering the page's last input or button because no space was left at the bottom of the page
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Five or six buttons crammed into the bar with no hierarchy, wrapping onto two lines on phones
- 03
The page already has a "Save" button and the bar adds another, so users don't know which one to click
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A horizontal container fixed at the bottom, with summary info or a hint on the left and primary and secondary action buttons on the right. Often has a top divider or shadow.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A bottom action bar sticks to the very bottom of the screen (or of a drawer or dialog). "Cancel / Save" at the bottom of a long form, "Add to cart / Buy now" at the bottom of a product page, "Total $45 · Checkout" at the bottom of a cart, and "3 selected · Delete" after checking several rows are all examples. Summary info or a hint usually sits on the left, buttons sit on the right, and the primary button goes on the far right. The row of buttons at the bottom of a drawer or dialog is the same thing.
How it differs from a Toolbar: a toolbar sits above the content and holds all kinds of actions for it (New, Export, Refresh). The bottom action bar sits at the bottom and only holds the last one or two actions that finish the page's task. It and the Bottom Tab Bar both stick to the bottom on phones, but the tab bar switches between main pages, while the action bar submits the current page. It's not a Footer either. The footer sits at the very end of the page with copyright and links, and it isn't pinned to the screen.
Keep it to 3 buttons or fewer, with a clear primary action. A fixed bar covers the last bit of the page, so add bottom padding of the same height. On phones, also add the safe area height (the home bar on iPhone). When the form hasn't changed, "Save" can be disabled. When there are unsaved changes, say so on the left.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-action-bar- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-pro-footer-bar.van-submit-bar.van-action-bar.ant-drawer-footer.el-drawer__footer.ant-modal-footer.el-dialog__footer.modal-footer[data-slot="dialog-footer"][data-slot="sheet-footer"][data-slot="drawer-footer"].fixed-bottom:has(button, .btn):not(nav).sticky-bottom:has(button, .btn):not(nav).fixed.bottom-0:has(button):not(nav).sticky.bottom-0:has(button):not(nav)
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
action-baractions-barbottom-actionssticky-actionsfixed-actionsfooter-toolbarfooter-actionsform-actionsform-footersubmit-barcheckout-bar
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
FooterToolbarActionBarSubmitBarBottomActionBarStickyActionBar
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
fixed bottom
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026