Bouton

Un bouton lance une action. Le libellé dit ce qui arrive ensuite.

Les états sélectionnés utilisent un fond neutre. La bordure bleue marque le choix.

Importation

Le bouton vit dans le système. On l'importe, on ne le redessine pas.

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

export function Example() {
  return <Button appearance="primary">Continuer</Button>;
}

Nom	Type	Défaut	Description
appearance	default \| primary \| subtle \| warning \| danger \| accent	default	Le poids visuel du bouton.
spacing	default \| compact	default	Compact sert dans un tableau ou une barre serrée.
isDisabled	boolean	false	Bloque l'action. À éviter dans un formulaire.
isSelected	boolean	false	Montre qu'une option est choisie.
isLoading	boolean	false	Remplace le libellé par un indicateur et bloque le clic.
shouldFitContainer	boolean	false	Le bouton prend toute la largeur du parent.
iconBefore	ReactNode	undefined	Icône avant le texte.
iconAfter	ReactNode	undefined	Icône après le texte.
children	ReactNode	undefined	Le libellé visible.

Cette page vous a aidé?