Design System Grosfillex

Créé par Dedi.

Boutons

Les boutons sont au centre du système de navigation. Ils permettent de communiquer des actions aux utilisateurs. Les boutons sont des éléments cliquables utilisés pour effectuer une action. Le bouton se redimensionne en fonction de la longueur du libellé (sauf en mobile). Le contenu du bouton est toujours centré et écrit en capital. Le verbe d'action est toujours conjugué à l'infinitif.

Boutons primaires

                <button class="btn btn-primary"></button>
<button class="btn btn-primary" disabled></button>
<button class="btn btn-primary btn-sm"></button>
<button class="btn btn-primary btn-lg"></button>
<button class="btn btn-primary btn-block"></button>

Boutons secondaires

                <button class="btn btn-secondary"></button>
<button class="btn btn-secondary" disabled></button>
<button class="btn btn-secondary btn-sm"></button>
<button class="btn btn-secondary btn-lg"></button>
<button class="btn btn-secondary btn-block"></button>

Boutons sombres

                <button class="btn btn-outline-dark"></button>
<button class="btn btn-outline-dark" disabled></button>
<button class="btn btn-outline-dark btn-sm"></button>
<button class="btn btn-outline-dark btn-lg"></button>
<button class="btn btn-outline-dark btn-block"></button>

Boutons clairs

                    <button class="btn btn-outline-light"></button>
<button class="btn btn-outline-light" disabled></button>
<button class="btn btn-outline-light btn-sm"></button>
<button class="btn btn-outline-light btn-lg"></button>
<button class="btn btn-outline-light btn-block"></button>

Boutons spécifiques

                <button class="btn btn-square btn-primary"></button>

<button class="btn btn-square btn-primary">
    {% include '@SyliusShop/Icons/icon_name.html.twig' %}
</button>

                <button class="btn btn-primary btn-icon">
    <span class="btn-icon-svg">{% include '@SyliusShop/Icons/icon_name.html.twig' %}</span>
    <span class="btn-icon-text">...</span>
</button>

retour menu