Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
fab-stack
Fixed action button stack positioned in the bottom-right corner. Stacks multiple floating buttons vertically.
Overview
The <fab-stack> element pins itself to one of 8 screen positions and stacks its children vertically with a gap. Position is delegated to the shared data-float system, so the stack can live in any corner or edge — not just bottom-right.
Uses column-reverse so the first child (primary action) sits at the bottom and secondary actions stack above it. Children get position: static so their own positioning rules don't fight the stack. Default position is bottom-right.
Usage
Default — bottom-right
<fab-stack> <settings-panel></settings-panel> <a href="#" data-back-to-top aria-label="Back to top">↑</a></fab-stack>Bottom-left for chat-style triggers
<fab-stack data-float="bottom-left"> <button class="fab" aria-label="Chat">💬</button> <button class="fab" aria-label="Help">?</button></fab-stack>Place at the end of the page body, after the footer. The Vanilla Breeze doc site uses this pattern for the settings gear and back-to-top arrow.
data-float positioning system
Underneath, <fab-stack> uses the same [data-float] contract any element can opt into. Eight standard positions, safe-area aware, mirrors in RTL.
Position values: top-left, top-center, top-right, center-left, center-right, bottom-left, bottom-center, bottom-right.
Singleton float
<button class="fab" data-float="bottom-right" aria-label="Compose">+</button> <a href="#top" data-back-to-top data-float="bottom-right" aria-label="Back to top">↑</a>For multiple items in the same corner, wrap in <fab-stack data-float="…"> rather than placing two bare floats — the stack handles gap and prevents overlap.
Tokens
| Token | Default | Purpose |
|---|---|---|
--z-float | 200 | z-index for floating elements (above --z-sticky 100) |
--float-offset | var(--size-l) | Distance from the screen edge. Override per-instance with inline style="--float-offset: 2rem". |
--nav-bottom-height | 0px | Set on :root when a fixed bottom nav is present; bottom-* positions add this offset automatically so floats sit above the nav. |
--safe-top / --safe-bottom / --safe-left / --safe-right | safe-area-inset-* | Mobile notch / home-indicator awareness — already added to edge positions; you don't manage these directly. |
Migration from custom position: fixed
Replace ad-hoc fixed positioning with data-float to pick up safe-area insets, the shared z-index, and consistent edge offsets. The previous five places that hardcoded their own corner positioning (corporate-cta .fab, back-to-top, page-tools fixed mode, fab-stack itself) all now route through this contract.
CSS Tokens
| Token | Default | Description |
|---|---|---|
--fab-stack-bottom | var(--size-l) | Bottom offset from viewport |
--fab-stack-end | var(--size-l) | Inline-end offset from viewport |
--fab-stack-gap | var(--size-s) | Gap between stacked buttons |
Positioning
Uses position: fixed with safe-area handling:
Safe area support
fab-stack { inset-block-end: calc(var(--fab-stack-bottom) + var(--safe-bottom, 0px)); inset-inline-end: var(--fab-stack-end);}The pointer-events: none on the container with pointer-events: auto on children ensures only the buttons are clickable, not the invisible stack area.
With Back-to-Top
When [data-back-to-top] is inside fab-stack, its own fixed positioning is overridden to static so the stack controls placement.
Accessibility
- Each child button should have its own
aria-label - The stack is a visual grouping — no special ARIA role needed
- Back-to-top uses scroll-driven animation for visibility
Related
- page-tools — Page-level utility toolbar with FAB collapse
- site-tools — Site-wide utility container
- settings-panel — Full settings dialog