> Header

Header

En-tête statique avec un logo carré et le titre de l'application à gauche, et un contenu libre à droite.

TagsuiInformationsFigmaWeb onlyExemples3StylesDisponibles

Default

export const Default = () => (
  <Header
    logo={<LogoPlaceholder />}
    title="Nom de l'app"
    right={
      <>
        <Button variant="tertiary" title="Composants" size="sm" onPress={() => {}} />
        <Button variant="tertiary" title="Thème" size="sm" onPress={() => {}} />
        <Button variant="primary" title="Documentation" size="sm" onPress={() => {}} />
      </>
    }
  />
);

SansContenuDroite

export const SansContenuDroite = () => <Header logo={<LogoPlaceholder />} title="Nom de l'app" />;

MobileSimple

export const MobileSimple = () => (
  <Header logo={<LogoPlaceholder />} right={<Button variant="tertiary" title="≡" size="sm" onPress={() => {}} />} />
);

Alveole UI Kit — v1.8.4