Documentation

Les buttons classiques o-btn sont les seuls à changer de couleur en fonction du module

Les variantes o-btn o-btn--light et o-btn o-btn--error peuvent elles aussi bénéficier des o-btn--big, o-btn--adapt, o-btn--icon et posséder des icônes.

Bouton

Preview

Classique

Balisage


                
                    <div class="o-btn">Classique</div>
                

Bouton avec icône

Preview

Classique avec icone

Balisage


                
                    <div class="o-btn"> <i class="c-fonticon__icon-map"></i><span>Classique avec icone</span></div>
                

Boutons paramètres

Preview

Balisage


                
                    <div class="o-settings">
                        <button class="o-btn o-btn--light o-btn--settings"><span>paramètres</span><i class="c-fonticon__icon-param"></i></button>
                    </div>
                

Gros bouton

Preview

Classique avec vraiment beaucoup de texte

Balisage


                
                    <div class="o-btn o-btn--big">Classique avec vraiment beaucoup de texte</div>
                

Gros bouton avec icône

Preview

Classique avec vraiment beaucoup de texte et un icone

Balisage


                
                    <div class="o-btn o-btn--big"><i class="c-fonticon__icon-map"></i><span>Classique avec vraiment beaucoup de texte et un icone</span></div>
                

Bouton adaptatif

Preview

Ce texte disparait sur appareils mobile

Balisage


                
                    <div class="o-btn o-btn--adapt"><i class="c-fonticon__icon-trash"></i><span>Ce texte disparait sur appareils mobile</span></div>
                

Bouton icône

Preview

Balisage


                
                    <div class="o-btn o-btn--icon"><i class="c-fonticon__icon-plus"></i></div>
                

Bouton clair

Preview

Clair

Balisage


                
                    <div class="o-btn o-btn--light">Clair</div>
                

Bouton rouge

Preview

Supprimer

Balisage


                
                    <div class="o-btn o-btn--error">Supprimer</div>
                

Boutons désactivés

Preview

Classique Désactivé
Clair Désactivé
Erreur Désactivé

Balisage


                
                    <div class="o-btn" disabled="">Classique Désactivé</div>
                    <div class="o-btn o-btn--light" disabled="">Clair Désactivé</div>
                    <div class="o-btn o-btn--error" disabled="">Erreur Désactivé</div>