daisyUI : composants de base

Chaque composant a une classe principale (btn), des variantes de couleur (btn-primary), de style (btn-outline) et de taille (btn-sm). La liste exhaustive est sur daisyui.com/components/.

Couleurs sémantiques

Classe	Rôle
`primary`, `secondary`, `accent`	Couleurs de marque
`neutral`	Neutre foncé
`info`, `success`, `warning`, `error`	Couleurs d’état
`base-100`, `base-200`, `base-300`	Fonds (page, surfaces, bordures)
`base-content`	Couleur du texte sur les fonds `base-*`

Elles s’utilisent avec les préfixes Tailwind : bg-primary, text-primary-content, border-base-300. Elles suivent le thème actif (voir Thèmes et couleurs).

Boutons

<button class="btn">Défaut</button>
<button class="btn btn-primary">Primaire</button>
<button class="btn btn-secondary btn-outline">Contour</button>
<button class="btn btn-ghost">Discret</button>
<button class="btn btn-link">Lien</button>
<button class="btn btn-error btn-sm">Supprimer</button>
<button class="btn btn-primary btn-lg w-full">Pleine largeur</button>
<button class="btn btn-circle" aria-label="Fermer">✕</button>
<button class="btn btn-primary" disabled>Désactivé</button>
<button class="btn btn-primary">
  <span class="loading loading-spinner"></span> Envoi…
</button>

Type	Classes
Couleur	`btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error`, `btn-neutral`
Style	`btn-outline`, `btn-soft`, `btn-dash`, `btn-ghost`, `btn-link`
Taille	`btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl`
Forme	`btn-circle`, `btn-square`, `btn-wide`, `btn-block`

Utiliser un vrai <button> (ou <a> pour un lien) : les classes ne rendent pas accessible un div.

Cartes

<div class="card bg-base-100 w-80 shadow-sm">
  <figure><img src="/photo.jpg" alt="Description de la photo" /></figure>
  <div class="card-body">
    <h2 class="card-title">
      Titre
      <div class="badge badge-secondary">Nouveau</div>
    </h2>
    <p>Texte de la carte.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Ouvrir</button>
    </div>
  </div>
</div>

Variante	Effet
`card-border`	Bordure
`card-sm`, `card-md`, `card-lg`	Taille du contenu
`card-side`	Image sur le côté
`image-full`	Image en arrière-plan

Grille de cartes adaptative :

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div class="card bg-base-100 shadow-sm"><div class="card-body">…</div></div>
  <div class="card bg-base-100 shadow-sm"><div class="card-body">…</div></div>
</div>

Badges

<span class="badge">Neutre</span>
<span class="badge badge-primary">Primaire</span>
<span class="badge badge-success badge-outline">Actif</span>
<span class="badge badge-sm badge-warning">En attente</span>

Alertes

<div role="alert" class="alert alert-success">
  <span>Enregistrement réussi.</span>
</div>
<div role="alert" class="alert alert-error alert-soft">
  <span>Une erreur est survenue.</span>
</div>
<div role="alert" class="alert alert-warning alert-outline">
  <span>Vérifier les informations saisies.</span>
</div>

Ajouter role="alert" pour que les lecteurs d’écran annoncent le message.

Tableaux

<div class="overflow-x-auto">
  <table class="table-zebra table">
    <thead>
      <tr>
        <th>Nom</th>
        <th>E-mail</th>
        <th>Statut</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>alice@exemple.com</td>
        <td><span class="badge badge-success">Actif</span></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@exemple.com</td>
        <td><span class="badge badge-ghost">Inactif</span></td>
      </tr>
    </tbody>
  </table>
</div>

Variantes : table-zebra (lignes alternées), table-pin-rows, table-pin-cols, table-xs à table-lg. Entourer le tableau de overflow-x-auto pour les petits écrans.

Statistiques

<div class="stats shadow">
  <div class="stat">
    <div class="stat-title">Visites</div>
    <div class="stat-value text-primary">25 600</div>
    <div class="stat-desc">21 % de plus que le mois dernier</div>
  </div>
  <div class="stat">
    <div class="stat-title">Commandes</div>
    <div class="stat-value">1 200</div>
  </div>
</div>

Chargement et progression

<span class="loading loading-spinner loading-md"></span>
<span class="loading loading-dots"></span>
<progress
  class="progress progress-primary w-56"
  value="60"
  max="100"
></progress>
<div
  class="radial-progress text-primary"
  style="--value:70;"
  role="progressbar"
  aria-valuenow="70"
>
  70 %
</div>
<div class="skeleton h-32 w-full"></div>

skeleton affiche un emplacement animé pendant le chargement de contenu.

Autres composants utiles

Composant	Classe
Avatar	`avatar` + `w-12 rounded-full` sur l’image
Fil d’Ariane	`breadcrumbs`
Étapes	`steps` / `step step-primary`
Infobulle	`tooltip` + `data-tip="Texte"`
Pagination	`join` + `btn`
Chronologie	`timeline`
Séparateur	`divider`
Notification flottante	`toast`
Indicateur	`indicator` + `indicator-item`

<div class="tooltip" data-tip="Copier le lien">
  <button class="btn">Copier</button>
</div>

<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn btn-active">2</button>
  <button class="join-item btn">3</button>
</div>

<ul class="steps">
  <li class="step step-primary">Panier</li>
  <li class="step step-primary">Livraison</li>
  <li class="step">Paiement</li>
</ul>

Combiner avec Tailwind

<button class="btn btn-primary w-full hover:scale-105 md:w-auto">
  Adaptable
</button>
<div class="card bg-base-200 dark:bg-base-300 p-6 shadow-md">…</div>

Les utilitaires Tailwind ajustent n’importe quel composant. Pour les variantes responsives, voir Tailwind : responsive et états.

Dépannage

Symptôme	Piste
Une variante n’a pas d’effet	Classe renommée en v5 (voir Migration et dépannage)
Le bouton ne change pas de couleur	`btn-primary` : vérifier que la couleur primaire existe dans le thème actif
Le texte est illisible sur un fond	Utiliser la classe `*-content` associée (`text-primary-content` sur `bg-primary`)
Le tableau déborde sur mobile	Entourer de `overflow-x-auto`
`badge` trop grand dans un titre	`badge-sm` ou `badge-xs`
L’alerte n’est pas lue par un lecteur d’écran	Ajouter `role="alert"`