Close button (Bouton de fermeture)

Le bouton de fermeture peut être placé dans divers composants refermable comme une pop-in ou un message et permettre ainsi leur suppression de l’interface.

Usage

• Il est représenté par une croix (fermer).
• Il se positionne en haut à droite du composant à fermer.

Style & code

Standard

Ce composant est un <button> contenant l’icône croix de la fonte d’icône. Ce bouton porte les déclencheurs pour que le JS Toggleclass puisse fermer ce qui doit l’être. Il peut aussi éventuellement porter des déclencheurs JS Toggleattribute…

<button class="su-close" data-sutoggleclass='[{"parent":"#mon-id","klass":".ma-classe"}]'>
    <i class="su-icon">
        fermer
    </i>
</button>

Inactif

Il suffit d’ajouter l’attribut disabled au <button>.

<button class="su-close" disabled data-sutoggleclass='[{"parent":"#mon-id","klass":".ma-classe"}]'>
    <i class="su-icon">
        fermer
    </i>
</button>