StickyActionBar

The action bar pinned to the bottom of the viewport on mobile.

Project detail 1 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 2 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 3 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 4 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 5 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 6 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 7 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 8 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 9 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 10 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 11 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

Project detail 12 — landing page redesign for the launch, first drafts due 48 hours after the kickoff call.

<StickyActionBar>
	<Button variant="outline">Contacter</Button>
	<Button>Postuler</Button>
</StickyActionBar>

It hides from the md breakpoint up, on the assumption that the same actions are already visible in the desktop layout. Pass hideOnDesktop={false} when they are not — which is what the preview above does.

API

PropTypeDefault
hideOnDesktopbooleantrueHide the bar from the md breakpoint up (default true).

Plus every <div> prop. Source: sticky-action-bar/components/sticky-action-bar.tsx.