<Banner
  title="Information importante"
  description="Votre compte a été mis à jour avec succès."
  variant="info"
/>

<Banner
  title="Opération réussie"
  description="Vos modifications ont été sauvegardées."
  variant="success"
/>

<Banner
  title="Attention"
  description="Votre session expire dans 5 minutes."
  variant="warning"
/>

<Banner
  title="Erreur"
  description="Impossible de sauvegarder vos modifications."
  variant="error"
/>

<Banner
  title="Nouvelle version disponible"
  description="Mettez à jour votre application pour bénéficier des dernières fonctionnalités."
  variant="info"
  action={{
    label: "Mettre à jour",
    onClick: () => handleUpdate()
  }}
/>

<Banner
  title="Cookies"
  description="Nous utilisons des cookies pour améliorer votre expérience."
  variant="info"
  dismissible
  onDismiss={() => setShowBanner(false)}
/>

import { Banner } from '@brikl/ui';
import { IconInfo, IconCheck, IconAlert, IconX } from '@brikl/icons';

<Banner
  icon={<IconInfo />}
  title="Nouvelle fonctionnalité"
  description="Découvrez notre nouvelle interface utilisateur."
  variant="info"
/>

<Banner
  title="Maintenance prévue"
  description="Le site sera en maintenance le 15 janvier de 2h à 4h du matin."
  variant="warning"
  persistent
/>

import { useState } from 'react';
import { Banner } from '@brikl/ui';

function BannerExample() {
  const [showBanner, setShowBanner] = useState(true);
  const [bannerType, setBannerType] = useState('info');

  return (
    <>
      {showBanner && (
        <Banner
          title="Bannière dynamique"
          description="Cette bannière peut être contrôlée programmatiquement."
          variant={bannerType}
          dismissible
          onDismiss={() => setShowBanner(false)}
          action={{
            label: "Changer le type",
            onClick: () => setBannerType(bannerType === 'info' ? 'success' : 'info')
          }}
        />
      )}
    </>
  );
}