🎯 Index de Navigation

🎮 Simulateur Variantes de Couleurs Variantes de Tailles Boutons avec Icônes États & Interactions Groupes de Boutons Accessibilité Exemples d'Utilisation Meilleures Pratiques

UI Kit - Système de Boutons Travelski

🎮 Simulateur Interactif

Contrôles du simulateur

Variante :

Hauteur :

Largeur :

Désactivé

Avec icône

<button class="button button--primary"> Bouton de Test </button>

Variantes de Couleurs

Primary (Bleu)

Action principale - utilise var(--color-primary)

<button class="button button--primary">Primary</button>

Secondary (Orange)

Action secondaire - utilise var(--color-secondary)

<button class="button button--secondary">Secondary</button>

Dark

Actions neutres - utilise var(--color-grey-800)

White

Sur fonds sombres - utilise var(--color-white)

<button class="button button--white">White</button>

Ghost

Actions tertiaires - transparent avec bordure

<button class="button button--ghost">Ghost</button>

Variantes de Tailles

Extra Small (XS)

28px de hauteur - Espaces très restreints

Small (SM)

32px de hauteur - Espaces restreints

<button class="button button--primary button--sm">Small</button>

Normal (Défaut)

44px de hauteur - Taille standard

<button class="button button--primary">Normal</button>

Large (LG)

52px de hauteur - Sections importantes

<button class="button button--primary button--lg">Large</button>

Extra Large (XL)

60px de hauteur - Hero sections

<button class="button button--primary button--xl">Extra Large</button>

Largeurs Disponibles

Largeur Auto

Largeur automatique selon le contenu

Largeur Pleine

Occupe toute la largeur disponible

<button class="button button--primary button--full">Pleine Largeur</button>

Boutons avec Icônes

Boutons avec icônes

<button class="button button--primary"> <img src="../icons/actions/download.svg" alt="Télécharger" class="button__icon icon-white"> Télécharger </button> <button class="button button--dark button--icon-only" aria-label="Fermer"> <img src="../icons/navigation/cross.svg" alt="Fermer" class="button__icon icon-white"> </button>

État de chargement

<button class="button button--primary button--loading"> Chargement... </button>

États & Interactions

États des boutons

<button class="button button--primary">Normal</button> <button class="button button--primary" disabled>Désactivé</button> <button class="button button--secondary" aria-pressed="true">Activé</button>

Groupes de Boutons

Groupe standard

<div class="button-group"> <button class="button button--secondary">Annuler</button> <button class="button button--primary">Valider</button> </div>

Groupe avec espacement

<div class="button-group button-group--between"> <button class="button button--ghost">Précédent</button> <button class="button button--primary">Suivant</button> </div>

Groupe vertical (mobile)

<div class="button-group button-group--stacked"> <button class="button button--primary button--full">Action Principale</button> <button class="button button--ghost button--full">Action Secondaire</button> </div>

Accessibilité

Navigation clavier

Testez avec Tab ⇥

<button class="button button--primary"> Focus Visible </button>

Labels pour lecteurs d'écran

Avec aria-label

<button class="button button--dark button--icon-only" aria-label="Fermer le dialogue"> <img src="../icons/navigation/cross.svg" alt="Fermer" class="button__icon icon-white"> </button>

Exemples d'Utilisation

Formulaire de réservation

Réservation

Date d'arrivée

Date de départ

<div class="form-container"> <h3>Réservation</h3> <div class="form-group"> <label>Date d'arrivée</label> <input type="date"> </div> <div class="button-group"> <button class="button button--secondary">Annuler</button> <button class="button button--primary">Réserver</button> </div> </div>

Interface de navigation

<div class="navigation-bar"> <div class="nav-left"> <button class="button button--ghost button--sm">Précédent</button> <button class="button button--ghost button--sm">Suivant</button> </div> <div class="nav-right"> <button class="button button--primary">Télécharger</button> </div> </div>

Meilleures Pratiques

✅ À faire

Utilisez button--primary pour l'action principale
Utilisez <img> avec icons.css
Utilisez les classes de layout.css
Ajoutez aria-label pour les boutons icônes
Respectez la hiérarchie visuelle
Testez la navigation clavier
Utilisez button--full sur mobile

❌ À éviter

Plus de 2 boutons primary par page
Boutons trop petits (< 44px)
Textes génériques ("Cliquez ici")
Oublier les états loading
Négliger les contrastes
Utiliser SVG inline au lieu d'<img>
Ignorer les variables CSS du système

🎯 Guide d'Utilisation des Boutons

Architecture Cohérente

                            .button {

                              background: var(--color-primary);

                              font-family: var(--font-body);

                              font-size: var(--font-size-sm);

                            }

✅ Utilise tous les systèmes CSS : color.css, typography.css, layout.css, icons.css

Classes Utilitaires

                            <button class="button button--primary button--lg">

                              <img src="icon.svg" class="button__icon icon-white">

                              Action

                            </button>

✅ Combinaison de classes pour un design cohérent

🚫 À Éviter

Utiliser des styles inline au lieu des classes
Mélanger plusieurs variantes de couleur
Oublier les états d'accessibilité
Négliger la taille tactile minimale
Créer des boutons sans cohérence visuelle

♿ Accessibilité

Tous les boutons respectent la taille tactile de 44px
Focus visible avec :focus-visible
Support prefers-reduced-motion
Labels appropriés pour les boutons icônes
Contrastes respectant les standards WCAG