ActionBar

<ActionBar> is the fixed-bottom toolbar for form Save / Cancel. Sits OUTSIDE the scrolling page content — never scrolls with it, always visible at the foot of long forms.

import from "@na/ui/components/ActionBar" ▶ Open in Storybook packages/ui/src/components/ActionBar.tsx

When to use

• Detail / edit pages with Save / Cancel that should stay reachable as the user scrolls.
• Multi-step flow footers where Back / Next must remain visible.

Don’t use ActionBar for: inline form actions (Button inside the form body), in-page sub-section actions (use ContentSection actions prop), or toolbar-style row actions (ContentToolbar).

Default

…form body…

CancelSave

<>
  <DetailPageBar … />
  <PageContent>
    <FormSection>…</FormSection>
  </PageContent>
  <ActionBar>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </ActionBar>
</>

API

Prop	Type	Default	Description
children *	ReactNode	—	Action buttons.
align	"start" | "center" | "end" | "between"	"end"	Justification of children.
className	string	—	Forwarded.

Design guidelines

✓ Do

• Mount ActionBar as a sibling of <PageContent>, not inside it. The whole point is "outside the scroll".
• Order: Cancel on the left (outline), primary on the right (default). Reverse only with explicit RTL.
• Keep total to 2–3 buttons. More belongs in a DropdownMenu.

✗ Don't

• Stuff ActionBar with secondary actions that aren't Save / Cancel — Test, Preview, etc. live elsewhere.
• Place ActionBar at the page top. The bottom-anchored convention is what makes it predictable.

Accessibility

• The bar is a static <div>. The buttons inside carry their own roles.
• Keyboard: Tab lands on the action buttons after the form fields.

Related

• PageContent — The scrolling region that ActionBar sits below.
• Button, ActionButton — The actual action triggers.

▶ Open ActionBar stories in Storybook