Boutons & Badges — Swellr Charte Graphique

1Boutons principaux

Les 7 variantes de boutons couvrent tous les contextes d'usage : action principale, secondaire, neutre, destructive, confirmative, icône-seul et authentification sociale.

Primary

Secondary

Ghost

Danger

Success

Icon (40×40)

Social — Google

Social — Apple

Token de couleur primaire : #028490 (teal) — Hover : #073742. Tous les boutons utilisent border-radius: 9999px (pill shape) sauf l'icon button qui utilise border-radius: 8px (app) ou 9999px (rond).

2États des boutons

Chaque bouton possède 6 états visuels : Default, Hover (simulé), Active (scale 0.98), Disabled (opacity 0.4), Loading (spinner), Focus (ring teal).

Variante

Default

Hover

Active

Disabled

Loading

Focus

Primary

Secondary

Ghost

Note : Les colonnes Hover sont illustrées statiquement avec le fond correspondant au fond de survol. En production, les effets hover sont déclenchés nativement par CSS :hover.

3Tailles

Trois tailles standardisées : SM, MD (défaut), LG. Chaque taille correspond à un contexte d'usage défini.

SM

height: 36px font-size: 14px padding: 8px 16px Usage: tags, tableaux, dense UI

MD

height: 48px ← défaut font-size: 16px padding: 12px 24px Usage: UI standard, formulaires

LG

height: 56px font-size: 18px padding: 16px 32px Usage: CTA hero, onboarding app

4Boutons spéciaux app mobile

Boutons d'authentification sociale et bouton icône-seul utilisés dans l'application React Native.

Contexte : fond sombre app

Boutons icône-seul

Carré 40×40 r:8

Rond 44px

Rond teal 44px

Ghost icon

5Badges

Indicateurs de statut, labels de catégorie et compteurs. Disponibles en deux tailles et avec indicateur de statut ponctuel.

Grande variante — LG

Actif Validé En attente Erreur Info

Petite variante — SM

Actif Validé En attente Erreur Info Premium Session

Indicateurs de statut — Status dots

En ligne Occupé Absent Hors ligne En session

Compteurs & notifications

3 9 99+ 12

6Tags & Chips

Composants de filtrage et de sélection multiple. Disponibles en version texte seul, avec icône, avec suppression (removable) et dans le contexte surf Swellr.

Chips — texte seul

Surf Météo Session Spots Actif

Chips — avec icône

🌊 Vagues Hossegor Matin Favori

Chips — removable (icône + texte + ×)

🌊 Hossegor 🏄 Lacanau 🌅 Biarritz 🤙 Capbreton

Cliquez sur le × pour supprimer un tag.

Tags lieux — contexte app Swellr

📍 Hossegor 📍 Lacanau 📍 Biarritz 📍 Capbreton 📍 Seignosse 📍 Anglet

7Specs techniques

Tableau récapitulatif de toutes les valeurs CSS pour chaque composant bouton et badge.

Composant	Variante	Fond	Texte	Border	Radius	Padding (MD)	Font
Bouton		`#028490`	`#ffffff`	none	`9999px`	`12px 24px`	Inter 600 / 16px
Bouton		`#ffffff`	`#028490`	`1.5px solid #028490`	`9999px`	`12px 24px`	Inter 600 / 16px
Bouton		transparent	`#637887`	`1px solid #e0e5e6`	`9999px`	`12px 24px`	Inter 600 / 16px
Bouton		`#DC2626`	`#ffffff`	none	`9999px`	`12px 24px`	Inter 600 / 16px
Bouton		`#22C55E`	`#ffffff`	none	`9999px`	`12px 24px`	Inter 600 / 16px
Bouton	Icon (carré)	`#090909`	`#ffffff`	none	`8px`	0 (40×40px)	—
Bouton	Social Google	`#ffffff`	`#1f2937`	`1px solid #e0e5e6`	`9999px`	`12px 20px`	Inter 500 / 16px
Bouton	Social Apple	`#090909`	`#ffffff`	none	`9999px`	`12px 20px`	Inter 500 / 16px
Badge	Primary	`rgba(2,132,144,.12)`	`#028490`	none	`9999px`	`3px 12px`	Inter 600 / 12px
Badge	Success	`rgba(34,197,94,.12)`	`#16a34a`	none	`9999px`	`3px 12px`	Inter 600 / 12px
Badge	Error	`rgba(220,38,38,.12)`	`#dc2626`	none	`9999px`	`3px 12px`	Inter 600 / 12px
Chip/Tag	Default	`#ffffff`	`#073742`	`1px solid #E8ECF4`	`50px`	`8px 14px`	Inter 600 / 14px
Chip/Tag	Surf (teal)	`#ECF8F8`	`#028490`	`1px solid rgba(2,132,144,.25)`	`50px`	`8px 14px`	Inter 600 / 14px

Transitions : Tous les boutons utilisent transition: 0.2s ease sur les propriétés background-color, border-color, box-shadow et transform. L'état Active applique transform: scale(0.98). L'état Disabled applique opacity: 0.4 + cursor: not-allowed + pointer-events: none.