Components
Back To Top
A floating button that appears after scrolling and smoothly returns to the top.
php artisan blatui:add back-to-top
<x-ui.back-to-top :demo="true" />
{{-- In real use, drop <x-ui.back-to-top /> once near the end of your layout: it floats
at the bottom-end corner and appears after scrolling past the threshold (300px). --}}Subtle
<x-ui.back-to-top variant="subtle" :demo="true" />
{{-- The `subtle` variant uses the card + border tokens instead of the primary fill. --}}API Reference
Props, slots and exposed methods for
<x-ui.back-to-top>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
threshold |
int
|
300
|
How far the window must be scrolled (in pixels) before the button reveals itself. |
variant |
string
|
'primary'
|
Visual style: a filled primary button or a subtle card-with-border button.
primary
subtle
|
demo |
bool
|
false
|
Docs-only. Pins the button static and always visible so it shows inside a non-scrolling preview frame. Leave false in real use, where it floats fixed at the bottom-end corner. |
Methods
Available on the component's Alpine scope — call them from markup in the slot
(e.g. @click="…").
| Method | Description |
|---|---|
toTop() |
Scrolls the window back to the top (smoothly, or instantly under prefers-reduced-motion). |