Button

Apercu

Le composant Button de packages/ui fournit un style de bouton coherent dans toute l'application. Il prend en charge plusieurs variantes visuelles, tailles, un etat de chargement et le pattern asChild pour le rendu sous forme d'elements differents.

Import

import { Button } from "@saas/ui";

Variantes

La prop variant controle le style visuel :

<Button variant="default">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="secondary">Secondary</Button>

Tailles

La prop size controle les dimensions et le padding :

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <TrashIcon className="h-4 w-4" />
</Button>

Etat de chargement

Passez disabled avec un spinner pour indiquer le chargement :

<Button disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Saving...
</Button>

Le bouton est automatiquement non interactif lorsque disabled est defini.

Pattern asChild

Utilisez la prop asChild pour appliquer les styles du bouton sur un element different (par ex. un Link Next.js) :

import Link from "next/link";

<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>

Cela fusionne les classes du bouton sur l'element enfant sans ajouter un wrapper <button> supplementaire.

Props

Tous les attributs HTML standard de <button> sont egalement acceptes.

Conseils

• Utilisez la variante destructive uniquement pour les actions irreversibles (supprimer, retirer).
• Associez la variante ghost aux boutons avec icone uniquement dans les barres d'outils.
• Fournissez toujours un texte visible ou un aria-label pour les boutons avec icone uniquement.