Patterns
Sticky action
The one action of a page held at the bottom edge of a phone's screen while it scrolls — pure CSS, not drawn from md up.
import { StickyAction } from "@krizaka/ui/sticky-action";Web only — React, from @krizaka/ui/sticky-action. Beta: its API may still change in a minor version.
- Mobile · n/a. A native screen has its own bottom bar. → Floating action button
Why it is here. Used by Akinaza.
When to use
- A public page with one thing to do (book, buy, contact) that must stay within thumb reach on a phone.
When not to use
- An app's navigation on a phone.Use instead: Rail nav
- Several equal actions.Use instead: Action bar
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { StickyAction } from "@krizaka/ui/sticky-action";Examples
Phone
A scrolling page with its one action stuck to the bottom edge.
Hidden while the page's own action shows
hideWhileVisible="#hero-book": the bar appears only once the hero's button has scrolled away.
Props
The one action of a page, held at the bottom edge of a phone — or, in task mode, of the form on every width.
| Prop | Type | Default | Description |
|---|---|---|---|
hideWhileVisible | string | — | A CSS selector of the page's own action (#hero-book): while it is on screen the bar is hidden, so a phone never shows
two « Book » at once. The bar keeps its place (no layout shift), cannot be focused or pressed while hidden. |
mode | "phone" | "task" | phone | phone: the bar of a phone only. task: on every width, for a form the person is finishing. |
summary | ReactNode | — | task only: what the action commits (Total 1 250,00 $), at the left of the action; stacked above it on a phone. |
Accessibility
- A plain container (a client component since
hideWhileVisible): the action inside keeps its own role and name; while hidden the bar isinertandaria-hidden. Inphonemode it is not rendered frommdup (display: none); intaskmode it stays, with thesummary(the total) read before the action.
Best practices
- Put it as the last child of the page's
main: a sticky element holds the edge inside its container. hideWhileVisible="#hero-book"hides the bar while the page's own button is on screen (an IntersectionObserver): the bar keeps its place, so nothing shifts, and cannot be focused or pressed while hidden. Under reduced motion it only fades. Reserve its height withscroll-padding-bottomso a focused element is never covered.- One
Buttonwith a verb (« Book »); hide the same button from the hero on a phone so it is not shown twice. - It clears the home indicator through the safe-area inset.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub