Composant de déclenchement d'actions. Disponible en plusieurs variantes (pleine, outline, ghost, lien), tailles et couleurs sémantiques. Supporte les groupes de boutons alignés horizontalement.
Utilisez toujours <button type="button"> pour les
actions dans la page. Réservez <a> aux liens de
navigation réels (changement d'URL). La classe .btn est
compatible avec les deux balises.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.btn |
<button> / <a> |
Classe de base. Applique padding, border-radius, border, cursor et display inline-flex. |
.btn-{color} |
<button> |
Variante pleine générée depuis $colors. Fond coloré
avec texte adapté via --content-on-{color}. |
.btn-outline-{color} |
<button> |
Variante outline. Fond transparent, bordure et texte colorés. Au survol, fond semi-opaque. |
.link-{color} |
<button> / <a> |
Style lien sans bordure ni fond. Couleur du texte uniquement. |
.btn-sm |
<button> |
Paddings réduits via --button-padding-x-sm /
--button-padding-y-sm. |
.btn-md |
<button> |
Paddings intermédiaires (identique au défaut). |
.btn-lg |
<button> |
Paddings augmentés via --button-padding-x-lg /
--button-padding-y-lg. |
.btn-group |
<div> |
Groupe de boutons alignés horizontalement. Supprime les border-radius intérieurs et les bordures doublées. |
.rounded-pill |
<button> |
Applique --border-radius-pill pour un style
capsule. |
.close-indicator |
<span> |
Affiche le caractère de fermeture via ::after avec
le contenu de --button-close-content (×). |
Fond coloré avec texte calculé automatiquement selon la couleur sémantique.
Fond transparent, bordure et texte colorés. Le survol applique le fond associé à la couleur.
Style lien sans fond ni bordure. Utile pour les actions secondaires ou tertiaires.
Combinaison de .btn-{color} avec .rounded-pill.
Bouton de fermeture utilisant .close-indicator pour afficher
le caractère × via CSS.
Les modificateurs de taille s'appliquent via des tokens CSS dédiés sur le padding.
| ÉTAT | SÉLECTEUR | DESCRIPTION |
|---|---|---|
| Survol | :hover |
Fond assombri via --hover-{color} (mix avec noir).
Sur les variantes sans couleur : --button-hover-background-color.
|
| Actif | :active / .active |
Fond plus sombre via --active-{color}. La classe
.active permet de forcer l'état actif via JS. |
| Focus | :focus-visible |
Contour via outline: 2px solid var(--focus-{color})
avec offset de 2px. Visible uniquement lors de la navigation clavier. |
| Désactivé | :disabled / [disabled] |
À gérer via l'attribut HTML natif disabled.
Styliser via :disabled dans votre CSS. |
La classe .btn-group aligne les boutons en ligne en
supprimant les border-radius intérieurs et les bordures doublées entre boutons adjacents.
Pour les variantes .btn-outline-{color} dans un .btn-group, la bordure gauche des boutons non-premiers est
automatiquement supprimée (border-left: none) pour éviter
le doublement des bordures.
| TOKEN | RÔLE |
|---|---|
--button-padding-x |
Padding horizontal par défaut |
--button-padding-y |
Padding vertical par défaut |
--button-padding-x-sm / y-sm |
Padding taille sm |
--button-padding-x-md / y-md |
Padding taille md |
--button-padding-x-lg / y-lg |
Padding taille lg |
--button-border-radius |
Rayon des coins du bouton |
--button-border-width |
Épaisseur de la bordure |
--button-border-style |
Style de bordure (solid, dashed…) |
--button-border-color |
Couleur de bordure par défaut (bouton sans variante couleur) |
--button-background-color |
Fond par défaut (bouton sans variante couleur) |
--button-outline-background-color |
Fond pour les boutons outline |
--button-hover-background-color
|
Fond au survol pour les boutons sans variante couleur |
--button-active-background-color
|
Fond à l'état actif pour les boutons sans variante couleur |
--button-focus-color |
Couleur du contour focus (outline) |
--button-close-content |
Caractère affiché par .close-indicator::after (× par
défaut) |
--button-close-gap |
Espacement entre le texte et l'indicateur de fermeture |
--border-width-outline |
Épaisseur de bordure pour les variantes outline |
--border-style-outline |
Style de bordure pour les variantes outline |
/* Global variables */
:root {
--button-border-radius: 8px;
--button-padding-x: 2rem;
--button-padding-y: 1rem;
--button-close-content: "✕";
}
/* Light theme */
:root[data-theme="light"] {
color-scheme:
light;
--button-border-color: #222222;
}
/* Dark theme */
:root[data-theme="dark"] {
color-scheme:
dark;
--button-border-color: #888888;
}
| PRATIQUE | DÉTAIL |
|---|---|
Balise <button> |
Toujours préférer <button> à <div> ou <span> pour la navigation clavier native (Tab,
Entrée, Espace). |
type="button" |
Toujours préciser type="button" pour éviter la
soumission de formulaire involontaire. |
aria-label |
Indispensable sur les boutons icône ou close qui n'ont pas de texte visible. Exemple :
aria-label="Fermer". |
aria-hidden="true" |
À poser sur .close-indicator pour masquer le
caractère décoratif aux lecteurs d'écran. |
| Focus visible | Le style :focus-visible est intégré au composant
avec un outline coloré. Ne pas le supprimer. |
| Contraste | Les couleurs de texte sont choisies via --content-on-{color} pour garantir un contraste
suffisant sur chaque variante, en mode clair et sombre. |
Toujours ajouter type="button" sur chaque
<button> hors formulaire pour éviter les
soumissions involontaires.
Pour les boutons icône ou fermer sans texte visible, toujours ajouter
aria-label et
aria-hidden="true" sur le span décoratif.
Ne pas utiliser <div> ou
<span> cliquables à la place d'un
<button>. Cela casse la navigation clavier et
l'accessibilité.
Ne pas mélanger des variantes .btn-{color} et
.btn-outline-{color} différentes dans un même
.btn-group — les bordures et fonds peuvent créer des
incohérences visuelles.
Les classes .btn-{color} et
.btn-outline-{color} sont générées via une boucle SCSS
sur $colors. Pour ajouter une nouvelle couleur, il suffit
de l'ajouter à la map $colors dans
abstracts/colors.
Button · WEBDEV-UI DOCS / V1