Bouton
زرButton
Stable
src/dsm/components/button.tsxLe bouton déclenche une action immédiate — envoyer, enregistrer, confirmer — ou reproduit un lien lorsqu'on lui fournit un élément à rendre. Ses variantes, tailles et états permettent de hiérarchiser les actions d'un écran sans changer de composant.
Import
import { Button } from "@/dsm/components/button";Exemples
Variantes
Les huit variantes de style, de la plus visible (primaire) à la plus discrète (lien).
LTR
Tailles
Tailles sm, md, lg et les variantes carrées pour bouton icône seul.
LTR
Avec icônes
Icône avant le texte, après le texte, ou bouton icône seul avec `aria-label`.
LTR
États
États de chargement et désactivé.
LTR
Rendu en lien
Un bouton qui navigue réellement, grâce à `render`.
Groupe de boutons
Composition d'actions primaire, secondaire et tertiaire dans un `ButtonGroup`.
LTR
Usage
Quand l'utiliser
- Utilisez la variante « primaire » pour l'action principale d'un écran, une seule fois par groupe d'actions.
- Utilisez « secondaire » ou « tertiaire » pour les actions concurrentes, moins prioritaires que l'action principale.
- Utilisez « danger » uniquement pour une action destructrice et irréversible (suppression, annulation définitive d'une demande).
- Utilisez la variante « lien » lorsque l'action s'apparente à de la navigation plutôt qu'à une commande.
- Passez `render` (avec `<a href>` ou `Link`) pour qu'un bouton se comporte comme un lien tout en gardant le style et les états du bouton.
Quand ne pas l'utiliser
- N'utilisez pas un bouton pour une navigation simple vers une autre page : préférez un lien, sauf si un traitement doit s'exécuter avant la redirection.
- N'empilez pas plusieurs boutons « primaire » dans la même zone : un seul par groupe d'actions.
- Ne désactivez pas un bouton sans expliquer la raison à proximité (message d'aide ou d'erreur).
Accessibilité & langues
Accessibilité
- Un bouton qui ne contient qu'une icône doit recevoir un `aria-label` explicite décrivant l'action, jamais le nom de l'icône.
- L'état `loading` pose `aria-busy="true"` et garde le bouton focusable (`focusableWhenDisabled`) pour ne pas faire sauter le focus clavier.
- Les tailles `sm`, `md` et `lg` offrent toutes une zone cliquable d'au moins 36 à 52px de haut, adaptée à un usage tactile.
RTL & multilingue
- Les icônes directionnelles (flèche, chevron) doivent utiliser `ArrowForward` / `ChevronForward` : elles se retournent automatiquement en arabe.
- Les icônes à sens fixe (téléchargement, ajout, fermeture) ne doivent jamais être enveloppées dans une classe de retournement.
Propriétés
Button
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "accent" | "inverse" | "link" | primary | Style visuel du bouton, à choisir selon l'importance de l'action. |
| size | "sm" | "md" | "lg" | "icon" | "icon-sm" | md | Hauteur et espacement horizontal ; `icon`/`icon-sm` produisent un bouton carré pour une icône seule. |
| iconStart | ReactNode | — | Icône affichée avant le texte ; remplacée par l'indicateur de chargement quand `loading` est actif. |
| iconEnd | ReactNode | — | Icône affichée après le texte. |
| loading | boolean | false | Affiche un indicateur de chargement animé, force `disabled` et pose `aria-busy`. |
| disabled | boolean | false | Désactive le bouton ; ignoré si `loading` est actif (le bouton reste focusable). |
| render | ReactElement | — | Fusionne les props du bouton sur un autre élément (`<a href>`, `Link`…) pour un bouton qui navigue réellement. |
| className | string | — | Classes Tailwind supplémentaires, fusionnées avec les classes de variante. |
ButtonGroup
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| className | string | — | Classes Tailwind supplémentaires. |
| children* | ReactNode | — | Boutons à aligner horizontalement avec un espacement constant et un retour à la ligne automatique. |