BottomBar
The fixed bottom shell StickyBanner and CookieConsentBanner share — edge-to-edge on phones, a centred floating card from sm: up — so the two look like one system even though the shell knows nothing about the buttons inside it.
import BottomBar from '@/components/ui/BottomBar';Source: src/components/ui/BottomBar.tsx
Examples
The cookie consent banner
CookieConsentBanner is a client component reading translations, so this is the same shape written by hand rather than the real thing rendered inline.
This website uses cookies
We use cookies to improve your experience on our site and to personalize the content we show you.
Props
<BottomBar> props
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | Accessible name of the region — the bar's own heading text. |
childrenrequired | ReactNode | — | — |
className | string | '' | — |
Accessibility
- Rendered as a labelled region (`role="region"`, `aria-label` from `title`) so a screen-reader user can find and skip it.
Usage
Do
- Decide server-side whether it mounts; one bar at a time — MasterLayout shows the cookie prompt before the phone reminder.
Don’t
- Add a close control to a consent prompt — an unanswered prompt stays, as production's does.
Related:StickyBanner