Hiob le 3 mars 2026 à 17:28

2026-03-03T17:28:49Z

← Version précédente		Version du 3 mars 2026 à 17:28
Ligne 1 :		Ligne 1 :
	== Description ==		== Description ==

	Le modèle '''IconButton''' crée de petits boutons carrés cliquables avec icône uniquement (48×48px), optimisés pour s'afficher en grille horizontale ou verticale. C'est une version compacte de {{m\|~~ButtonLink~~}} conçue pour les réseaux sociaux, liens externes et actions rapides.		Le modèle '''IconButton''' crée de petits boutons carrés cliquables avec icône uniquement (48×48px), optimisés pour s'afficher en grille horizontale ou verticale. C'est une version compacte de {{m\|Button}} conçue pour les réseaux sociaux, liens externes et actions rapides.

	== Différences avec ButtonLink ==		== Différences avec ButtonLink ==

Hiob le 3 mars 2026 à 17:28

2026-03-03T17:28:08Z

← Version précédente		Version du 3 mars 2026 à 17:28
Ligne 278 :		Ligne 278 :
	* {{m\|ButtonLink}} – Version complète avec texte et alignement personnalisé (300×80px)		* {{m\|ButtonLink}} – Version complète avec texte et alignement personnalisé (300×80px)

	~~[[Catégorie:Modèle de bouton]]~~

	* {{m\|Bandeau}}		* {{m\|Bandeau}}
	* {{m\|Couleur}}		* {{m\|Couleur}}
	* [[Aide:~~Modèles~~]]		* [[Aide:Modèle]]

	<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>		<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>

Hiob : Création

2026-02-05T22:45:20Z

Création

Nouvelle page

== Description ==

Le modèle '''IconButton''' crée de petits boutons carrés cliquables avec icône uniquement (48×48px), optimisés pour s'afficher en grille horizontale ou verticale. C'est une version compacte de {{m|ButtonLink}} conçue pour les réseaux sociaux, liens externes et actions rapides.

== Différences avec ButtonLink ==

{| class="wikitable"
! Aspect !! ButtonLink !! IconButton
|-
| '''Usage''' || Boutons d'appel à l'action principaux || Grilles d'icônes, liens sociaux
|-
| '''Dimensions''' || 300×80px (variable) || 48×48px (fixe)
|-
| '''Texte''' || Oui (gras, sous l'icône) || Non (icône seule)
|-
| '''Alignement''' || left/center/right || Inline (auto-wrap)
|-
| '''Taille icône''' || 40px || 24px
|-
| '''Display''' || Block (flex) || Inline-flex
|}

== Utilisation ==

Ce modèle crée un bouton carré compact pointant vers n'importe quelle destination (réseaux sociaux, services externes, plateformes de téléchargement, etc.). Les boutons s'alignent automatiquement en ligne et passent à la ligne suivante sur petits écrans.

=== Syntaxe ===

<syntaxhighlight lang="mediawiki">
{{IconButton
|link = URL du lien
|logo = Nom de couleur prédéfinie (optionnel)
|image = Nom du fichier image (avec extension, optionnel)
|size = Taille de l'icône (défaut : 24px)
|background = Couleur d'arrière-plan personnalisée (optionnel)
|alt = Texte alternatif (optionnel)
}}
</syntaxhighlight>

=== Paramètres ===

{| class="wikitable sortable"
! Paramètre !! Description !! Requis !! Défaut
|-
| '''link''' || URL complète ou relative || Oui || -
|-
| '''logo''' || Nom de couleur/plateforme prédéfinie (voir liste ci-dessous) || Non || gray
|-
| '''image''' || Nom du fichier image personnalisé (ex : "MonLogo.svg") || Non || ButtonLink-{{{logo}}}.svg
|-
| '''size''' || Taille de l'icône (format MediaWiki) || Non || 24px
|-
| '''background''' || Couleur d'arrière-plan personnalisée (hex, rgb, nom) || Non || (utilise logo ou défaut)
|-
| '''alt''' || Texte alternatif pour l'accessibilité || Non || valeur de '''logo'''
|}

{{Bandeau|type=astuce|
* Lorsque '''logo''' est spécifié, le logo et la couleur de la plateforme choisie seront appliqués automatiquement.
* Si '''logo''' et '''background''' sont tous deux spécifiés, '''background''' est prioritaire.
* Pour créer une grille centrée, entoure les boutons avec : <code><nowiki><div style="text-align: center;">...</div></nowiki></code>}}

== Exemples ==

=== Boutons basiques ===

<syntaxhighlight lang="mediawiki">
{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://twitter.com/user|logo=twitter}}
{{IconButton|link=https://discord.gg/invite|logo=discord}}
</syntaxhighlight>

{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://twitter.com/user|logo=twitter}}
{{IconButton|link=https://discord.gg/invite|logo=discord}}

=== Grille centrée ===

<syntaxhighlight lang="mediawiki">
<div style="text-align: center;">
{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://twitter.com/user|logo=twitter}}
{{IconButton|link=https://discord.gg/invite|logo=discord}}
{{IconButton|link=https://youtube.com/@channel|logo=youtube}}
</div>
</syntaxhighlight>

<div style="text-align: center;">
{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://twitter.com/user|logo=twitter}}
{{IconButton|link=https://discord.gg/invite|logo=discord}}
{{IconButton|link=https://youtube.com/@channel|logo=youtube}}
</div>

=== Cas d'usage pratiques ===

==== Profil utilisateur ====
<syntaxhighlight lang="mediawiki">
'''Mes réseaux :'''
{{IconButton|link=https://github.com/user|logo=github}}
{{IconButton|link=https://gitlab.com/user|logo=gitlab}}
{{IconButton|link=https://stackoverflow.com/users/123|logo=stackoverflow}}
</syntaxhighlight>

==== Téléchargements multiples ====
<syntaxhighlight lang="mediawiki">
<div style="text-align: center;">
'''Télécharger sur :'''

{{IconButton|link=https://modrinth.com/mod/example|logo=modrinth}}
{{IconButton|link=https://curseforge.com/minecraft/mc-mods/example|logo=curseforge}}
{{IconButton|link=https://hangar.papermc.io/user/example|logo=hangar}}
{{IconButton|link=https://github.com/user/repo/releases|logo=github-releases}}
</div>
</syntaxhighlight>

==== Support/Donation ====
<syntaxhighlight lang="mediawiki">
<div style="text-align: center;">
'''Soutenez le projet :'''

{{IconButton|link=https://patreon.com/creator|logo=patreon}}
{{IconButton|link=https://ko-fi.com/creator|logo=kofi}}
{{IconButton|link=https://paypal.me/creator|logo=paypal}}
</div>
</syntaxhighlight>

==== Pied de page wiki ====
<syntaxhighlight lang="mediawiki">
<div style="text-align: center; padding: 20px; border-top: 1px solid #eee;">
'''Rejoignez notre communauté'''

{{IconButton|link=https://discord.gg/example|logo=discord}}
{{IconButton|link=https://github.com/org|logo=github}}
{{IconButton|link=https://twitter.com/handle|logo=twitter}}
{{IconButton|link=https://youtube.com/@channel|logo=youtube}}
</div>
</syntaxhighlight>

== Couleurs prédéfinies ==

=== Réseaux sociaux ===

{| class="wikitable"
! Code !! Plateforme !! Couleur !! Exemple
|-
| <code>discord</code> || Discord || Violet (#5865f2) || {{IconButton|link=https://wiki.nefald.fr/|logo=discord}}
|-
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{IconButton|link=https://wiki.nefald.fr/|logo=twitter}}
|-
| <code>youtube</code> || YouTube || Rouge (#ff0000) || {{IconButton|link=https://wiki.nefald.fr/|logo=youtube}}
|-
| <code>twitch</code> || Twitch || Violet (#9146ff) || {{IconButton|link=https://wiki.nefald.fr/|logo=twitch}}
|-
| <code>mastodon</code> || Mastodon || Violet (#6364ff) || {{IconButton|link=https://wiki.nefald.fr/|logo=mastodon}}
|-
| <code>facebook</code> || Facebook || Bleu (#1877f2) || {{IconButton|link=https://wiki.nefald.fr/|logo=facebook}}
|-
| <code>instagram</code> || Instagram || Dégradé multicolore || {{IconButton|link=https://wiki.nefald.fr/|logo=instagram}}
|-
| <code>linkedin</code> || LinkedIn || Bleu (#0a66c2) || {{IconButton|link=https://wiki.nefald.fr/|logo=linkedin}}
|-
| <code>reddit</code> || Reddit || Orange (#ff4500) || {{IconButton|link=https://wiki.nefald.fr/|logo=reddit}}
|-
| <code>tiktok</code> || TikTok || Noir (#000000) || {{IconButton|link=https://wiki.nefald.fr/|logo=tiktok}}
|-
| <code>telegram</code> || Telegram || Bleu (#0088cc) || {{IconButton|link=https://wiki.nefald.fr/|logo=telegram}}
|-
| <code>whatsapp</code> || WhatsApp || Vert (#25d366) || {{IconButton|link=https://wiki.nefald.fr/|logo=whatsapp}}
|}

=== Développement ===

{| class="wikitable"
! Code !! Plateforme !! Couleur !! Exemple
|-
| <code>github</code> || GitHub || Noir (#181717) || {{IconButton|link=https://wiki.nefald.fr/|logo=github}}
|-
| <code>gitlab</code> || GitLab || Orange (#fc6d26) || {{IconButton|link=https://wiki.nefald.fr/|logo=gitlab}}
|-
| <code>bitbucket</code> || Bitbucket || Bleu (#0052cc) || {{IconButton|link=https://wiki.nefald.fr/|logo=bitbucket}}
|-
| <code>npm</code> || NPM || Rouge (#cb3837) || {{IconButton|link=https://wiki.nefald.fr/|logo=npm}}
|-
| <code>stackoverflow</code> || Stack Overflow || Orange (#f48024) || {{IconButton|link=https://wiki.nefald.fr/|logo=stackoverflow}}
|}

=== Plateformes Minecraft ===

{| class="wikitable"
! Code !! Plateforme !! Couleur !! Exemple
|-
| <code>modrinth</code> || Modrinth || Vert (#1bd96a) || {{IconButton|link=https://wiki.nefald.fr/|logo=modrinth}}
|-
| <code>curseforge</code> || CurseForge || Orange (#f16436) || {{IconButton|link=https://wiki.nefald.fr/|logo=curseforge}}
|-
| <code>hangar</code> || Hangar || Bleu (#0089ff) || {{IconButton|link=https://wiki.nefald.fr/|logo=hangar}}
|-
| <code>spigot</code> || Spigot || Orange (#ed8106) || {{IconButton|link=https://wiki.nefald.fr/|logo=spigot}}
|-
| <code>paper</code> || Paper || Bleu (#1a8cff) || {{IconButton|link=https://wiki.nefald.fr/|logo=paper}}
|-
| <code>fabric</code> || Fabric || Beige (#dbd3c8) || {{IconButton|link=https://wiki.nefald.fr/|logo=fabric}}
|-
| <code>forge</code> || Forge || Bleu foncé (#1e2c42) || {{IconButton|link=https://wiki.nefald.fr/|logo=forge}}
|-
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || {{IconButton|link=https://wiki.nefald.fr/|logo=neoforge}}
|-
| <code>quilt</code> || Quilt || Violet (#8b5cf6) || {{IconButton|link=https://wiki.nefald.fr/|logo=quilt}}
|}

=== Plateformes de financement ===

{| class="wikitable"
! Code !! Plateforme !! Couleur !! Exemple
|-
| <code>patreon</code> || Patreon || Rouge (#ff424d) || {{IconButton|link=https://wiki.nefald.fr/|logo=patreon}}
|-
| <code>kofi</code> || Ko-fi || Rouge (#ff5e5b) || {{IconButton|link=https://wiki.nefald.fr/|logo=kofi}}
|-
| <code>paypal</code> || PayPal || Bleu dégradé || {{IconButton|link=https://wiki.nefald.fr/|logo=paypal}}
|-
| <code>stripe</code> || Stripe || Violet (#635BFF) || {{IconButton|link=https://wiki.nefald.fr/|logo=stripe}}
|-
| <code>liberapay</code> || Liberapay || Jaune (#f6c915) || {{IconButton|link=https://wiki.nefald.fr/|logo=liberapay}}
|-
| <code>opencollective</code> || Open Collective || Bleu (#7fadf2) || {{IconButton|link=https://wiki.nefald.fr/|logo=opencollective}}
|}

=== Couleurs sémantiques ===

{| class="wikitable"
! Code !! Alternative !! Couleur !! Usage
|-
| <code>primary</code> || <code>blue</code> || Bleu (#3366cc) || Actions principales
|-
| <code>secondary</code> || <code>gray</code>, <code>grey</code> || Gris (#72777d) || Actions secondaires
|-
| <code>success</code> || <code>green</code> || Vert (#14866d) || Messages de succès
|-
| <code>danger</code> || <code>red</code> || Rouge (#d73333) || Avertissements, erreurs
|-
| <code>warning</code> || <code>yellow</code> || Jaune (#fc3) || Alertes
|-
| <code>info</code> || <code>cyan</code> || Cyan (#00b8d4) || Informations
|-
| <code>purple</code> || <code>violet</code> || Violet (#6f42c1) || -
|-
| <code>pink</code> || - || Rose (#d63384) || -
|-
| <code>orange</code> || - || Orange (#fd7e14) || -
|-
| <code>teal</code> || - || Turquoise (#20c997) || -
|-
| <code>indigo</code> || - || Indigo (#6610f2) || -
|-
| <code>black</code> || - || Noir (#000) || -
|-
| <code>white</code> || - || Blanc (#fff) || -
|-
| <code>light</code> || - || Gris clair (#f8f9fa) || -
|-
| <code>dark</code> || - || Gris foncé (#343a40) || -
|}

== Bonnes pratiques ==

{{Bandeau|type=note|
* '''Accessibilité''' : Le paramètre <code>alt</code> est auto-généré mais peut être personnalisé pour améliorer l'accessibilité
* '''Performance''' : Les boutons utilisent un seul fichier CSS même avec 20+ boutons sur la page
* '''Responsive''' : Les boutons passent automatiquement à la ligne sur petits écrans grâce à <code>inline-flex</code>
* '''Cohérence visuelle''' : Utilise les logos prédéfinis quand possible pour maintenir une apparence uniforme
* '''Espacement''' : Les boutons ont une marge de 4px pour espacer automatiquement, pas besoin d'ajouter des espaces manuellement
}}

== Voir aussi ==

* {{m|ButtonLink}} – Version complète avec texte et alignement personnalisé (300×80px)

[[Catégorie:Modèle de bouton]]

* {{m|Bandeau}}
* {{m|Couleur}}
* [[Aide:Modèles]]

<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>

Modèle:IconButton/doc - Historique des versions

Hiob le 3 mars 2026 à 17:28

Hiob le 3 mars 2026 à 17:28

Hiob : Création

Hiob : Création