BUTTONS

Button dock

Draft

A fixed-position bottom action bar for primary and secondary actions.

Usage

Common alternative names

Action bar, sticky actions, bottom bar

---

Anatomy

A button dock is a vertically stacked container with an optional accessory view at the top and a button container holding up to four action buttons.

Accessory view

(Optional)

Button container

(required)

I agree to the terms and conditions.

Secondary button

(Optional)

Secondary button

(Optional)

Confirm button

(Recommended)

Dismiss button

(Recommended)

---

Behavior

Breakpoints

Components are optimised for multiple screen widths. There are 2 variants of the button dock component: Narrow and Wide.

---

Narrow

Use the Narrow variant of the component for screens up to 600 wide.

375

← Add new order

Form content

Content area where the user fills in their form data before submitting via the button dock below.

up to 600

← Add new order

Form content

Content area with more room. The button dock still stacks vertically at this width, keeping touch targets full-width for easy tapping.

---

Wide

Use the Wide variant of the component for screens wider than 600.

600 and wider

← Add new order

Form content

On wider screens the button dock switches to a horizontal layout. Secondary actions align to the left and the primary action aligns to the right, matching the natural reading direction for form submission flows.

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

ButtonDock accepts up to three action slots arranged in a vertical stack: a primary action, a secondary action, and a dismiss action. Each slot accepts any ReactNode, giving consumers full control over button semantics and styling.

import { ButtonDock } from '@arch-ui/components';
import { Button } from '@arch-ui/components';

<ButtonDock
  primaryAction={<Button kind="primary" fullWidth>Save changes</Button>}
  secondaryAction={<Button kind="secondary">Save draft</Button>}
  dismissAction={<a href="/cancel">Cancel</a>}
/>

Primary action only

The simplest use case is a single primary action at the bottom of a form.

<ButtonDock
  primaryAction={<Button kind="primary" fullWidth>Continue</Button>}
/>

---

Two actions

A common pattern for forms with a submit and a secondary option.

<ButtonDock
  primaryAction={<Button kind="primary" fullWidth>Submit</Button>}
  secondaryAction={<Button kind="secondary">Back</Button>}
/>

---

Position

The position prop controls how the dock attaches to the viewport or scroll container.

Value	Behaviour
fixed (default)	Pinned to the bottom of the viewport. Use for full-page forms.
sticky	Sticks within its scroll container. Use when the dock lives inside a scrollable region like a modal or drawer.

<ButtonDock
  position="sticky"
  primaryAction={<Button kind="primary" fullWidth>Confirm</Button>}
/>

---

Props

Prop	Type	Default	Description
primaryAction	ReactNode	undefined	The primary action button, typically a full-width Button.
secondaryAction	ReactNode	undefined	A secondary action button rendered below the primary action.
dismissAction	ReactNode	undefined	A dismiss or cancel link rendered below the secondary action.
position	'fixed' | 'sticky'	'fixed'	Controls whether the dock is fixed to the viewport or sticky within its scroll container.
className	string	undefined	Additional CSS class names applied to the root element.

---

Accessibility

• The root element uses role="contentinfo" to provide a semantic landmark.
• The primary action button should be first in tab order.
• Action slots accept any ReactNode, so consumers are responsible for using proper button or link semantics in each slot.

---

Best practices

Do:

• Use for forms with a submit and cancel action at the bottom.
• Use sticky when the dock should scroll with a container (modals, drawers).
• Always provide a primary action.

Don't:

• Do not nest multiple ButtonDocks on the same page.
• Do not use for navigation -- use a toolbar or navigation bar instead.

---

Design tokens

Token	Role
color-surface-base	Dock background
shadow-shallow-above	Top shadow to separate from content
spacing-16	Padding
spacing-12	Gap between action slots
z-semantic-sticky	Z-index for fixed/sticky positioning