SATISFACT.io Design System

Librairie de composants UI basée sur le Design System SATISFACT

Boutons

Variants : Primary, Secondary, Ghost, Destructive, Link • Tailles : sm, md, lg

Variants

Différents styles de boutons pour différents contextes

Primary

Secondary

Ghost

Destructive

Link

Champs de saisie

Champs texte avec états focus et error

Input

Exemples de champs avec et sans erreurs

Entrez une adresse email valide

Badges

Pour les statuts, les filtres et les indicateurs

Badge Variants

Différents styles de badges pour différents types d'informations

Semantic Badges

Succès
Attention
Erreur
Information
Neutre
Outline

Avec icônes

Top Réactivité
À traiter
En attente

Notation par étoiles

Composant pour afficher des scores CSAT (avec demi-étoiles)

Rating

Différentes tailles et valeurs de notation

Tailles

Small:
4.5 / 5
Medium:
4.5 / 5
Large:
4.5 / 5

Valeurs avec demi-étoiles

5.0 / 5
Parfait
4.8 / 5
Excellent
4.5 / 5
Très bien
4.2 / 5
Bien
3.7 / 5
Moyen
2.5 / 5
Insuffisant
1.2 / 5
Mauvais

Sans valeur affichée

Intégré dans une carte (exemple Score global)

Score global

4.8/ 5

Exemple (données fictives)

Cartes

Containers pour organiser le contenu

Score global

12 derniers mois

4.8/ 5

Exemple (données fictives)

Nouveau lien public

Copier un lien public à partager manuellement

Typographie

Plus Jakarta Sans • Base 16px / 24px

Heading 1 - 36px/44px

font-bold (700) • text-4xl

Heading 2 - 30px/38px

font-semibold (600) • text-3xl

Heading 3 - 24px/32px

font-semibold (600) • text-2xl

Body - 16px/24px • font-regular (400) • text-base

Caption - 12px/16px • font-regular (400) • text-sm

Couleurs

Palette de couleurs du Design System

Brand Colors

Primary (Blue)

Secondary (Violet)

Accent (Teal)

Semantic Colors

Success (Green)

Warning (Amber)

Danger (Red)