Sticky actions
In long forms, the bar with the Save and Cancel buttons stays visible while the page scrolls. It is built with Tailwind's sticky classes; no separate component is needed.
Sticky bar at the top
Give the bar with the title and buttons sticky top-0; it sticks to the top of the scrolling container. z-10 keeps it above the fields, and the semi-transparent background with backdrop-blur keeps the content passing underneath legible. Try it by scrolling the box in the example.
<div class="max-h-96 overflow-y-auto rounded-sm bg-white shadow-sm dark:bg-zinc-900">
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white/90 px-5 py-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/90">
<h3 class="text-sm font-semibold text-gray-900 dark:text-zinc-100">General settings</h3>
<div class="flex gap-2"><acun:button size="sm" variant="white">Cancel</acun:button><acun:button size="sm">Save</acun:button></div>
</div>
<div class="grid gap-4 p-5 md:grid-cols-2">
@foreach (['Company name', 'Short name', 'Province', 'District', 'Phone', 'Email', 'Website', 'Tax number', 'Contact person', 'Contact phone'] as $i => $label)
<acun:input name="field{{ $i }}" :label="$label" />
@endforeach
</div>
</div>| Prop | Values |
|---|---|
sticky top-0 z-10 | Pins the bar to the top of the container |
bg-white/90 backdrop-blur | Blurs the content passing underneath |
Sticky bar at the bottom
If you want to keep the buttons at the end of the form, put the bar at the very bottom and give it sticky bottom-0. Wherever the user is in the form, the Save button stays visible at the bottom of the screen.
<div class="max-h-80 overflow-y-auto rounded-sm bg-white shadow-sm dark:bg-zinc-900">
<div class="grid gap-4 p-5 md:grid-cols-2">
@foreach (['Address title', 'Recipient name', 'Phone', 'District', 'Neighborhood', 'Street', 'Building no.', 'Apartment no.'] as $i => $label)
<acun:input name="bottom{{ $i }}" :label="$label" />
@endforeach
</div>
<div class="sticky bottom-0 flex justify-end gap-2 border-t border-gray-200 bg-white/90 px-5 py-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/90">
<acun:button size="sm" variant="white">Cancel</acun:button>
<acun:button size="sm">Save</acun:button>
</div>
</div>| Prop | Values |
|---|---|
sticky bottom-0 | Pins the bar to the bottom of the container |
On a panel page
In the panel layout the content area scrolls on its own, so sticky top-0 sticks the bar right below the top bar with no extra setup. If you put the bar inside the form, the Save button works with type="submit".
<acun:form wire:submit="save" dirty-check>
<div class="sticky top-0 z-10 mb-6 flex items-center justify-between rounded-sm bg-white/90 px-5 py-3 shadow-sm backdrop-blur dark:bg-zinc-900/90">
<h1 class="text-base font-semibold text-gray-900 dark:text-zinc-100">Company settings</h1>
<div class="flex gap-2">
<acun:button variant="white" :href="route('settings.index')">Cancel</acun:button>
<acun:button type="submit">Save</acun:button>
</div>
</div>
<acun:card>…</acun:card>
</acun:form>| Prop | Values |
|---|---|
type="submit" | Submits the form while the bar is inside it |