Boutons

Primary

Tailles
Icône à gauche
Icône à droite
Icône seule
radius · cercle
Formes

Secondary

Tailles
Icône à gauche
Icône à droite
Icône seule
radius · cercle
Formes

Tertiary

Tailles
Icône à gauche
Icône à droite
Icône seule
radius · cercle
Formes

Dark-low

Tailles
Icône à gauche
Icône à droite
Icône seule
radius · cercle
Formes

Success

Tailles
Icône à gauche
Icône à droite
Icône seule
radius · cercle
Formes

Warning

Tailles
Icône à gauche
Icône à droite
Icône seule
radius · cercle
Formes

Ghost

Tailles
Icône à gauche
Icône à droite

Boutons-icônes de barre

data-size="sm"
data-size="md"
data-size="lg"
plain
sans verre
avec badge2

Balisage

<button class="ice-btn" data-variant="primary" data-size="lg">
  <i data-icon="star"></i> Continuer
</button>

<!-- icône à droite : c’est l’ordre du balisage qui décide -->
<button class="ice-btn" data-variant="secondary" data-size="lg">
  Suivant <i data-icon="arrow-right"></i>
</button>

<!-- icône seule, cercle -->
<button class="ice-btn" data-variant="tertiary" data-size="md"
        data-shape="circle" aria-label="Ajouter">
  <i data-icon="plus"></i>
</button>

Survol

primary
dark-low
secondary
tertiary
success
warning
ghost

Opacité des icônes

secondary
primary