Header

Stable

AppBar présentationnel cross-app : lockup marque (mark VegaHarp + wordmark), navigation optionnelle, slot actions droite, sticky optionnel. Tokens-only, a11y landmark '<'header'>', 4 thèmes.

import { Header } from "@lyra/tokens/components";

Playground

Minimal — marque seule, tone="dark"

Avec navigation — tone="dark"

Avec navigation + actions — tone="dark"

brandName="AETHOS" + navigation — tone="light"

sticky=true — prop déclarée

Lyra — markId="lyra" + brandName="LYRA"

Aethos — markId="aethos" + brandName="AETHOS"

Démo interactive — réglages du playground (props ajustables en direct) à venir.

<Header tone="dark" brandName="PLÉIADES"
  links={[{ label: "Dashboard", href: "/dashboard" }]}
  actions={<button>Mon compte</button>} />

Documentation

Aperçu unique — pas de variantes documentées.

brand, brandName, links, actions, tone, sticky

<Header tone="dark" brandName="PLÉIADES"
  links={[{ label: "Dashboard", href: "/dashboard" }]}
  actions={<button>Mon compte</button>} />