Composants d'affichage
Les composants d'affichage servent à présenter du contenu visuel : titres, images, badges, modales, indicateurs de progression, etc.
Typographie et structure
| Composant | Description |
|---|---|
| Heading | Titres sémantiques (h1-h6) avec tailles et poids configurables |
| Panel | Conteneur de surface avec bordure et ombre optionnelle |
| Divider | Trait de séparation, avec texte optionnel |
| Kbd | Touche ou raccourci clavier |
| VisuallyHidden | Contenu réservé aux lecteurs d'écran |
| Icon | Icônes SVG avec taille et couleur personnalisables |
Médias et identité
| Composant | Description |
|---|---|
| Image | Image avec ratios, sources multiples et lazy loading |
| Avatar | Avatar avec initiales, statut et badges |
| AvatarGroup | Groupe d'avatars avec gestion du surplus |
| Tag | Étiquette retirable (filtre, mot-clé) |
| Badge | Badge avec variantes, icônes et couleurs personnalisables |
Overlays et conteneurs
| Composant | Description |
|---|---|
| ConfirmDialog | Confirmation par promesse avec useConfirm() |
| Dialog | Modale/tiroir polyvalent (center, left, right, top, bottom, full) |
| Popover | Bulle contextuelle avec placement intelligent |
| Tooltip | Infobulle au survol et au focus clavier |
| Alert | Alerte informative avec types success, warning, error, info |
| Toast | Notifications éphémères avec useToast() et SuToaster |
| DataTable | Tableau de données : tri, sélection, pagination |
| TreeView | Arborescence dépliable au clavier |
| Tabs | Onglets avec variantes underline, contained et pills |
| Accordion | Panneaux dépliables avec ouverture simple ou multiple |
| Collapse | Zone dépliable individuelle |
Indicateurs
| Composant | Description |
|---|---|
| Progress | Barre de progression avec états et mode indéterminé |
| Spinner | Indicateur de chargement avec 5 styles d'animation |
| Skeleton | Silhouette de contenu en cours de chargement |
| EmptyState | Zone vide avec explication et actions |