Leafy - Documentation

Les boutons sont un élément essentiel des interfaces utilisateur. Leafy propose plusieurs styles de boutons prêts à l'emploi pour faciliter l'intégration dans vos projets.

Intégration des boutons

Assurez-vous d'avoir bien inclus la feuille de style et le script JavaScript du framework dans votre projet :

<link rel="stylesheet" href="https://leafy.campagnesartois.fr/1.0.0/styles/style.min.css">
<script type="module" src="https://leafy.campagnesartois.fr/1.0.0/js/main.js"></script>

Utilisation des boutons

Les boutons Leafy s'utilisent avec la classe .btn. Voici un exemple de bouton simple :

Lien

<a class="btn">Lien</a>
<button class="btn">Bouton</button>
<input class="btn" type="submit" value="Envoyer"/>
<input class="btn" type="reset" value="Réinitialiser"/>

Boutons principaux

Leafy propose plusieurs styles de boutons pour s'adapter à différents contextes :

<button type="button" class="btn btn--primary">Bouton primaire</button>
<button type="button" class="btn btn--success">Bouton succès</button>
<button type="button" class="btn btn--danger">Bouton danger</button>
<button type="button" class="btn btn--warning">Bouton avertissement</button>
<button type="button" class="btn btn--info">Bouton info</button>

Tailles des boutons

Vous pouvez ajuster la taille des boutons en utilisant des classes supplémentaires :

Boutons de petite et grande taille

<button type="button" class="btn btn--sm">Petit bouton</button>
<button type="button" class="btn">Bouton normal</button>
<button type="button" class="btn btn--lg">Grand bouton</button>

Boutons pleine largeur

Pour des boutons occupant toute la largeur de leur conteneur, utilisez la classe .btn--block :