CatBut — UIToggle · Badge · Tabs · Select · Modal

Toggle.tsx

Toggle — interrupteur booléen

Taille md (défaut) vs sm — côte à côte

size="md" (défaut)

size="sm"

disabled

Usage réel — paramètres utilisateur (état interactif)

Notifications push
Mode sombre
Sauvegarde automatique
Analytiques (désactivé)

notifs=true · darkMode=false · autoSave=true

Badges.tsx

Badge — étiquettes de statut

appearance="neon" — toutes les variantes, tailles sm & md

smdefaultprimarysuccesswarningdangerinfo
mddefaultprimarysuccesswarningdangerinfo

appearance="ticket" — toutes les variantes, tailles sm & md

smdefaultprimarysuccesswarningdangerinfo
mddefaultprimarysuccesswarningdangerinfo

appearance="accent" — toutes les variantes, tailles sm & md

smdefaultprimarysuccesswarningdangerinfo
mddefaultprimarysuccesswarningdangerinfo

dot=true — point de statut (neon pulse, ticket & accent discrets)

en ligneerreuralerte
en ligneerreuralerte
en ligneerreuralerte

Cas d'usage — tags mélangés dans une vraie interface

livemodbetabanviplurk

Tabs.tsx

Tabs — navigation par onglets

Tabs non-contrôlé — defaultValue automatique (premier onglet)

Contenu de l'onglet Vue d'ensemble.

Les onglets permettent d'organiser du contenu connexe en sections distinctes accessibles au clic.

Tabs contrôlé — value + onChange piloté depuis le parent

Onglet Résumé (contrôlé).

onglet actif : "overview"

Select.tsx

Select — liste déroulante

Select de base — placeholder, option désactivée, valeur sélectionnée

Sans valeur initiale (placeholder)

Choisir un pays...

Avec valeur initiale — value="user"

Utilisateur

value="user"

disabled=true

Next.js

Select dans un formulaire réel

Pays

Sélectionner un pays...

Rôle

Utilisateur

Framework

Choisir...

ToolTips.tsx

Tooltip — infobulle au survol

Positions : top / bottom / left / right (défaut : top)

position="top"position="bottom"position="left"position="right"

Contenu riche + delay personnalisé

Sauvegarde automatique activéeSuppression irréversibleDélai 600ms avant apparitiondelay=0 — immédiat

Usage inline — texte avec tooltip sur un mot

Le composant TooltipDéclenché au survol ou focus clavier (onMouseEnter / onFocus) est indépendant de DropdownDéclenché au clic — menus, panneaux persistants car le survol et le clic ont des sémantiques différentes.

Modal.tsx

Modal — boîte de dialogue

Tailles : sm / md / lg / full

Variantes — sans footer / avec footer / closeOnOverlayClick=false

Cas d'usage réel — confirmation de suppression

CatBut · UI · Toggle · Badge · Tabs · Select · Modal