Version

Démarrer

Design system ?
Présentation de Trilogy
L'installation
Les performances
Accessibilité
Changelog
Releases

Guide pratique

Sémantique des pages
Contenu éditorial
Contenu graphique
Composants

Structure d'une page

Page de base
Les colonnes
Les rangées

Guide des styles

Couleurs
Listes (ul, dl)
Helpers
Icones
Typographie
Z-Index

Composants

Accordion
Badge
Box
Breadcrumb
Button & Link
Card
Checkradio
Countdown
Disclaimer
Divider
Entry
Footer
Form
Hero
Icon
Loader
Menu
Modal
Navbar
Notification
Option
Otp
Pagination
Popover
Price
Pricing Table
Product Tour
Progress Bar
Select
Slice
Slider
Stepper
Sticker
Table
Tab
Tag
Timeline
Title & text
Toolbar
Transfert

Button & Link

Les boutons appellent l’internaute à entreprendre une action (inscription, ajout au panier, soumission de formulaire…). Les liens signalent un changement de page ou une redirection. Leur efficacité dépend avant tout de la qualité rédactionnelle et visuelle de l’accroche afin de maximiser le taux de réalisation de l’objectif sous-jacent.

Principal

Le bouton principal is-tertiary est un bouton call-to-action impactant.

Aperçu

Mode responsive

                                                                <div class="buttons">
                                        <button class="button is-tertiary">Standard</button>
                                        <button class="button is-tertiary is-hovered">Hover</button>
                                        <button class="button is-tertiary is-active">Cliqué</button>
                                        <button class="button is-tertiary is-focused">Focus</button>
                                        <button class="button is-tertiary" disabled="">Inactif</button>
                                    </div>

Aperçu avec un fond

Mode responsive

                                                                <div class="buttons">
                                        <button class="button is-tertiary is-inverted">Standard</button>
                                        <button class="button is-tertiary is-inverted is-hovered">Hover</button>
                                        <button class="button is-tertiary is-inverted is-active">Cliqué</button>
                                        <button class="button is-tertiary is-inverted is-focused">Focus</button>
                                        <button class="button is-tertiary is-inverted" disabled="">Inactif</button>
                                    </div>

WARNING

D'autres couleurs existent, mais elles ne doivent pas être utilisées côté client :

Dans ce cas, préciser le sens sémantique (ex : "Attention") dans le texte ou l'aria-label du bouton pour rester conforme aux exigences d'accessibilité.

Secondaire

Le bouton secondaire .is-primary engage une action moins importante ou une action alternative au bouton principal.

Aperçu

Mode responsive

                                                                <div class="buttons">
                                        <button class="button is-primary is-outlined">Standard</button>
                                        <button class="button is-primary is-hovered">Hover</button>
                                        <button class="button is-primary is-active">Cliqué</button>
                                        <button class="button is-primary is-focused">Focus</button>
                                        <button class="button is-primary" disabled="">Inactif</button>
                                    </div>

Aperçu avec un fond

Mode responsive

                                                                <div class="buttons">
                                        <button class="button is-primary is-outlined is-inverted">Standard</button>
                                        <button class="button is-primary is-inverted is-hovered">Hover</button>
                                        <button class="button is-primary is-inverted is-active">Cliqué</button>
                                        <button class="button is-primary is-inverted is-focused">Focus</button>
                                        <button class="button is-primary is-inverted" disabled="">Inactif</button>
                                    </div>

WARNING

Comme pour le bouton principal, d'autres déclinaisons de couleurs existent, mais ne doivent pas être utilisées côté client :

Dans ce cas, préciser le sens sémantique (ex : "Attention") dans le texte ou l'aria-label du bouton pour rester conforme aux exigences d'accessibilité.

Petit

Une seule variante de taille existe (.is-small) et impacte tous les breakpoints et toutes les variantes de boutons. En revanche, .is-small-mobile impacte uniquement les mobiles.

Aperçu

Mode responsive

                                                                    <div class="buttons">
                                            <button class="button is-tertiary is-small">Standard</button>
                                            <button class="button is-tertiary is-small-mobile">Standard</button>
                                        </div>

Côte-à-côte

Imaginons un bouton de validation et un bouton d'annulation/retour juste à côté.

Aperçu

Mode responsive

                                                                     <div class="buttons">
                                            <button class="button is-primary is-outlined">Annuler</button>
                                            <button class="button is-tertiary">Valider</button>
                                        </div>

Balisage HTML

C'est la classe .button qui donne son style à un élément et pas nécessairement le balisage HTML, qui se doit d'être sémantique avant tout.

Aperçu

Mode responsive

Lien

                                                                     <div class="buttons">
                                            <a class="button is-tertiary">Lien</a>
                                            <button class="button is-tertiary">Bouton</button>
                                            <input class="button is-tertiary" type="submit" value="Submit input" aria-label="submit input">
                                        </div>

Liens

Aperçu

Mode responsive

Lien standard animé

Lien standard static

Lien standard sans soulignement

Lien souligné animé

Lien souligné static

Lien standard sans soulignement

                                                                <p><a class="link">Lien standard animé</a></p>
                                    <p><a class="link is-static">Lien standard static</a></p>
                                    <p><a class="link is-plain">Lien standard sans soulignement</a></p>
                                        <p><a class="link has-text-secondary">Lien souligné animé</a></p>
                                        <p><a class="link has-text-secondary is-static">Lien souligné static</a></p>
                                        <p><a class="link has-text-secondary is-plain">Lien standard sans soulignement</a></p>

Aperçu avec un fond

Mode responsive

Lien standard animé

Lien standard static

Lien standard sans soulignement

Lien souligné animé

Lien souligné static

Lien standard sans soulignement

                                                                <p><a class="link is-inverted">Lien standard animé</a></p>
                                    <p><a class="link is-static is-inverted">Lien standard static</a></p>
                                    <p><a class="link is-plain is-inverted">Lien standard animé</a></p>

Les liens ont la classe .is-link (par défaut ce lien à un soulignement animé). Il est recommandé de ne pas ajouter de classe additionnelle (voir ACCESSIBILITÉ).
Pour un lien se trouvant dans un bloc avec arrière-plan, ajouter la classe is-inverted.

WARNING

La classe .is-text est dépréciée.

DON'T

Les liens ne doivent pas être utilisés sans un attribut href ; pour cela, il est recommandé d'utiliser un bouton.
La suppression de l'animation au survol via la classe is-static est très fortement déconseillée (voir ACCESSIBILITÉ)
La suppression du soulignement via la classe is-plain est très fortement déconseillée (voir ACCESSIBILITÉ)

ACCESSIBILITY

Chaque lien doit avoir un intitulé explicite (c'est à dire compréhensible sans avoir accès au contexte) pour rester conforme aux exigences d'accessibilité ; voir exemples dans la page d'accessibilité.
Les liens devraient être soulignés et animés car sans cela, la couleur du lien devient le seul signifiant de sa nature de lien ou de la prise de survol, ce qui est contraire aux exigences d'accessibilité (voir la page d'accessibilité)

Squelette de bouton

Mode d'affichage lors de l'attente d'un traitement asynchrone.

Aperçu

Mode responsive

                                                                    <div class="buttons">
                                            <button class="button is-tertiary is-loading">Loading</button>
                                            <button class="button is-tertiary is-loaded">Loaded</button>
                                            <button class="button is-tertiary is-outlined is-loading">Loading</button>
                                            <button class="button is-tertiary is-outlined is-loaded">Loaded</button>
                                        </div>

Aperçu avec un fond

Mode responsive

                                                                    <div class="buttons has-text-centered">
                                            <button class="button is-tertiary is-loading is-inverted">Loading</button>
                                            <button class="button is-tertiary is-loaded is-inverted is-hovered">Loaded</button>
                                            <button class="button is-tertiary is-outlined is-loading is-inverted">Loading</button>
                                            <button class="button is-tertiary is-outlined is-loaded is-inverted">Loaded</button>
                                        </div>

Bouton avec icone

Ajout de la class 'has-icon' sur le bouton

Aperçu

Mode responsive

                                                                <div class="buttons">
                                        <button class="button has-icon is-primary is-outlined">
                                            <span class="icon is-small"><i class="tri-download" aria-hidden="true"></i></span>
                                            Lorem Ipsum
                                        </button>
                                        <button class="button has-icon is-tertiary">
                                            <span class="icon is-small"><i class="tri-download" aria-hidden="true"></i></span>
                                            Lorem Ipsum
                                        </button>
                                    </div>