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.
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