Button

Actions auxquelles les utilisateurs peuvent faire confianceLien vers la section

Les Bouton component est la primitive d'action primaire dans PyColors UI.

Utilisez-le pour:

• Soumettre des formulaires
• Déclenchement des dialogues
• ouverture feuilles
• Débuter le paiement
• enregistrer les changements
• Confirmer les actions destructrices
• naviguer quand un élément doit se comporter visuellement comme un bouton

Cette mise en œuvre étend la primitive de bouton shadcn/ui et est aligné avec le système de conception PyColors: tokens de couleur sémantiques, rayon, ombres et anneaux de focus.

ImportationLien vers la section

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

Utilisation de baseLien vers la section

Le bouton par défaut utilise des tokens sémantiques primaires et s'adapte automatiquement au mode clair et sombre.

Modèle d'action produitLien vers la section

Les boutons sont l'une des primitives d'interaction à la plus haute fréquence dans un produit SaaS.

Ils influencent :

• clarté de conversion
• Confiance dans le workflow
• action destructrice sécurité
• friction d'embarquement
• Qualité perçue des produits

Quand utiliser le boutonLien vers la section

Utilisez le bouton lorsque l'utilisateur effectue une action.

Modèle de décisionLien vers la section

VariantesLien vers la section

Les boutons prennent en charge les variantes de priorité d'action et de signification sémantique.

Variantes disponiblesLien vers la section

TaillesLien vers la section

Le bouton prend en charge les tailles standard et les tailles d'icônes uniquement.

Tailles disponiblesLien vers la section

État handicapéLien vers la section

Utilisez l'état désactivé lorsqu'une action n'est pas disponible.

Les boutons désactivés utilisent une opacité réduite et suppriment l'interaction avec le pointeur.

Avec icôneLien vers la section

Utilisez des icônes lorsqu'elles renforcent l'action.

Le bouton applique une valeur par défaut size-4 aux icônes SVG imbriquées qui n'ont pas déjà un size-* classe.

import { Button } from "@pycolors/ui";
import { Plus } from "lucide-react";

export function ButtonLeadingIcon() {
  return (
    <Button>
      <Plus className="mr-2 size-4" aria-hidden="true" />
      Add item
    </Button>
  );
}

État de validationLien vers la section

Le bouton prend en charge l'état visuel invalide grâce à aria-invalid.

Cela peut être utile pour soumettre des actions lorsque le formulaire associé n'est pas valide.

Avec icôneLien vers la section

Utilisation asChild pour rendre le bouton comme un autre élément tout en préservant le style du bouton.

Ceci est couramment utilisé pour les liens et les composants de routeur.

UtilisationsLien vers la section

Guide de décision produitLien vers la section

Bouton vs lien vs badgeLien vers la section

APILien vers la section

Button étend les accessoires de bouton HTML standard.

React.ComponentProps<"button">;

TypeScript typesLien vers la section

export type ButtonVariant =
  "default" | "secondary" | "outline" | "ghost" | "destructive" | "link";

export type ButtonSize =
  "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";

AccessibilitéLien vers la section

• Utilisez des étiquettes claires et descriptives.
• Préserver les styles de focus clavier.
• Utilisez des boutons d'icône uniquement avec un aria-label.
• Marquer les icônes décoratives avec aria-hidden="true".
• Utilisation disabled pour des actions indisponibles.
• Ne comptez pas uniquement sur la couleur pour communiquer un état destructeur ou invalide.
• Utilisez des liens pour la navigation et des boutons pour les actions.

Préférez/évitezLien vers la section

Directives de copie du produitLien vers la section

Les étiquettes de bouton doivent communiquer clairement l'intention et réduire l'hésitation.

Questions courantesLien vers la section

RelatedLien vers la section