Capacités du template — système de design, chrome, blocs restaurant et fonctionnalités interactives.
Initials fallback (no logo)
label="Pizzeria Démo" → "PD"
Single-word label
label="Darius" → "D"
With logo image
logoSrc set → AvatarImage, initials fall back if 404
Sizes
avatarClassName · sm / default / lg / xl
Real data
status: "closed_today" / source: "schedule"
Open
status: "open" — badge only, no second line
1 line
2 lines in badge
2 lines under
2 lines left
Closed · opens at 18:30
status: "opens_later_today", source: "schedule", opensAt set, diff ≥ 60 min
1 line
2 lines in badge
2 lines under
2 lines left
Closed · opens in 23 min
status: "opens_later_today", source: "schedule", diff < 60 min → "Opens in {n} min"
Open → direct tel: dial
status kind: "open"
Closed → confirmation dialog
status kind: "closed_today" + nextOpenLabel
Closure → dialog with reopen date
source: "closure" + nextOpenLabel
null → synthetic-open (direct dial)
liveStatus: null → treated as open
Sizes
icon / sm / default / lg
Rounded (current)
circular flag button · avoidCollisions · flips up when near bottom
Squared · flag + code + chevron
pill-shaped button with border · same collision handling
Animated · 3 modes (current)
startViewTransition cross-fade · light → dark → system
No animation · 3 modes
direct cycleTheme() · light → dark → system
Circular reveal · 2 modes (Darius-style)
clip-path circle from top-right corner · light ↔ dark
Dark / Light only · no animation
setTheme() toggle · light ↔ dark
Dark / Light / System · no animation
cycleTheme() · light → dark → system
Stacked picker · mobile radial context
tap → 3 rounds fan upward · active highlighted with accent border · used in RadialSettings
Composant téléphone uniquement. Tapez le FAB paramètres pour déployer le sélecteur de thème et de langue.
Default
Settings FAB · theme stacked picker + locale toggle on arc
Barre mobile affichée — agrandissez à ≥ 640 px pour voir la pilule glass bureau.Pilule glass bureau affichée — rétrécissez sous 640 px pour voir la barre mobile.
Default
links + theme toggle + locale toggle, inside the liquid-glass pill — clock is a sibling, never part of the navbar
1 line
2 lines in badge
2 lines under
2 lines left
Closed today · opens tomorrow
status: "closed_today", opensAt tomorrow → reopenTomorrowLabel
1 line
2 lines in badge
2 lines under
2 lines left
Closed today · opens Tuesday
status: "closed_today", nextOpenWeekday → day of week
1 line
2 lines in badge
2 lines under
2 lines left
Closed today · no next info
status: "closed_today", no nextOpenLabel → badge only
1 line
2 lines in badge
2 lines under
2 lines left
Closed · annual closing
source: "closure", closureSeverity: "annual" → annualClosingLabel
1 line
2 lines in badge
2 lines under
2 lines left
Closed · exceptional closing
source: "closure", closureSeverity: "exceptional" → exceptionalClosingLabel
1 line
2 lines in badge
2 lines under
2 lines left
Closed · reopens 30 June
source: "closure", closureEndDate set → shows reopen date
1 line
2 lines in badge
2 lines under
2 lines left
Closed · no data
status: "closed_today", source: "none" → badge only, no second line
1 line
2 lines in badge
2 lines under
2 lines left
Variants
default / outline / secondary / ghost
Mobile FAB (round)
size=icon + rounded-full — as used in the mobile bottom bar
Barre mobile affichée — agrandissez à ≥ 640 px pour voir la pilule glass bureau.Pilule glass bureau affichée — rétrécissez sous 640 px pour voir la barre mobile.
Nav only
no toggles
Nav + ThemeToggle
+ theme cycle
Nav + ThemeToggle + LocaleToggle
full — current header config
Barre mobile affichée — agrandissez à ≥ 640 px pour voir la pilule glass bureau.Pilule glass bureau affichée — rétrécissez sous 640 px pour voir la barre mobile.
Transparent
no background, no blur — border only
Plain background
bg-card solid — no blur
Glass · subtle
bg-background/10 blur(6px)
Glass · medium
bg-background/20 blur(14px)
Glass · liquid (current)
bg-background/25 saturate(150%) blur(24px)
Glass · heavy
bg-background/50 saturate(120%) blur(32px)
Frosted
bg-background/75 blur(20px) — nearly opaque