# 🦁 Lions.dev - Showcase Boutons

Démonstration complète du système de boutons avec identité visuelle Lions.dev

Version 1.0.0 | Priority #1 CRITIQUE | Gradients élégants • Animations hover • Focus accessible WCAG 2.1 AA

## 🎨 Palette de Couleurs Lions.dev

### Couleurs Signature

Lions Blue: #2D9BEF (Primary)

Lions Gold: #FFC700 (Premium/Help)

### Couleurs Sémantiques

Success: #22BB69

Info: #00BCD4

Warning: #FF9800

Danger: #F44336

Secondary: #8995A1

## 🎯 Boutons Solid - Toutes les Severities

Boutons avec gradients Lions.dev élégants et ombres colorées

<fr:commandButton value="Primary" severity="primary" /> <fr:commandButton value="Success" severity="success" /> <fr:commandButton value="Help (Gold)" severity="help" />

💡 Astuce: Passez la souris sur les boutons pour voir les animations (translateY -2px + shadow elevation)

## 📝 Boutons Outlined - Bordures Colorées

Boutons avec bordure colorée et background transparent

<fr:commandButton value="Primary Outlined" severity="primary" outlined="true" /> <fr:commandButton value="Danger Outlined" severity="danger" outlined="true" />

## 🔗 Boutons Text - Minimalistes

Boutons sans bordure ni background (sauf au hover)

<fr:commandButton value="Primary Text" severity="primary" text="true" />

## 📏 Tailles de Boutons

Support de 3 tailles : sm (32px), base/défaut (40px), lg (48px)

### Small (32px height)

### Base / Défaut (40px height)

### Large (48px height)

<fr:commandButton value="Small" size="sm" /> <fr:commandButton value="Base" /> <!-- size="base" par défaut --> <fr:commandButton value="Large" size="lg" />

## 🔵 Boutons Rounded - Forme Pill

Boutons avec border-radius: 9999px (forme pill/capsule)

<fr:commandButton value="Rounded Primary" severity="primary" rounded="true" />

## 📐 Boutons Raised - Effet d'Élévation

Boutons avec shadow-lg pour effet surélevé (au hover: shadow-xl)

<fr:commandButton value="Raised" severity="primary" raised="true" />

## ✨ Combinaisons de Variantes

Combinaisons de plusieurs attributs pour des boutons uniques

### Rounded + Raised

### Outlined + Rounded

### Large + Rounded + Raised

<fr:commandButton value="Combo" severity="primary" rounded="true" raised="true" size="lg" />

## 🎨 Icon-Only Buttons (Carrés et Ronds)

Boutons sans texte, uniquement avec icône (utilisez l'attribut title pour accessibilité)

### Icon-Only Square (défaut)

### Icon-Only Rounded (cercles)

### Différentes Tailles

<fr:commandButton icon="pi pi-search" title="Rechercher" /> <fr:commandButton icon="pi pi-plus" rounded="true" title="Ajouter" />

## ❌ État Disabled

Boutons désactivés avec opacity: 0.5 et cursor: not-allowed

<fr:commandButton value="Disabled" severity="primary" disabled="true" />

## 💼 Exemples Pratiques - Cas d'Usage Réels

### Formulaire d'Édition

### Actions Dangereuses avec Confirmation

### Actions Premium / Upgrade

### Toolbar d'Actions

## ♿ Accessibilité WCAG 2.1 AA

### ✅ Fonctionnalités Accessibles

- Focus Ring: Anneau de focus visible (3px solid rgba blue) avec offset 2px
- Contrastes: Tous les boutons respectent WCAG AA (ratio ≥ 4.5:1)
- Navigation Clavier: Tous les boutons sont focusables et activables au clavier
- Tailles Touch-Friendly: Minimum 44px sur mobile (iOS guidelines)
- Reduced Motion: Support de prefers-reduced-motion (pas d'animations)
- High Contrast: Support de prefers-contrast: high (bordures 2px)

### 🧪 Testez le Focus

Utilisez la touche TAB pour naviguer entre les boutons et observer le focus ring

💡 Astuce Accessibilité: Pour les boutons icon-only, TOUJOURS utiliser l'attribut `title` pour fournir un label accessible aux lecteurs d'écran.

## 📊 Résumé Technique

### 🎨 Design System

- Lions Blue #2D9BEF (Primary)
- Lions Gold #FFC700 (Premium)
- 7 Severities disponibles
- Gradients 135deg
- Shadows colorées rgba(color, 0.25)
- Border-radius: 8px (base)

### ⚡ Animations

- Transition: 250ms cubic-bezier
- Hover: translateY(-2px)
- Hover: shadow elevation +10%
- Active: translateY(0)
- Support prefers-reduced-motion

### 📏 Tailles

- Small: 32px height
- Base: 40px height (défaut)
- Large: 48px height
- Touch minimum: 44px mobile
- Icon spacing: 8px (base)

© 2026 Lions Development Team | Version 1.0.0 | Priority #1 CRITIQUE ✅ COMPLÉTÉ