Passer au contenu principal Passer à la navigation dans les documents
Check
in English

Boutons

Utilisez les styles de boutons personnalisés de Bootstrap pour les actions dans les formulaires, les boîtes de dialogue, etc., avec la prise en charge de plusieurs tailles, états, etc.

Sur cette page

Exemples

Bootstrap comprend plusieurs styles de boutons prédéfinis, chacun servant son propre objectif sémantique, avec quelques extras ajoutés pour plus de contrôle.

html 
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations désignées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .visually-hiddenclasse.

Désactiver l'habillage du texte

Si vous ne voulez pas que le texte du bouton soit renvoyé à la ligne, vous pouvez ajouter la .text-nowrapclasse au bouton. Dans Sass, vous pouvez $btn-white-space: nowrapdésactiver l'habillage du texte pour chaque bouton.

Balises de bouton

Les .btnclasses sont conçues pour être utilisées avec l' <button>élément. Cependant, vous pouvez également utiliser ces classes sur des éléments <a>ou <input>(bien que certains navigateurs puissent appliquer un rendu légèrement différent).

Lors de l'utilisation de classes de boutons sur <a>des éléments qui sont utilisés pour déclencher des fonctionnalités dans la page (comme la réduction du contenu), plutôt que de créer des liens vers de nouvelles pages ou sections de la page actuelle, ces liens doivent recevoir un role="button"pour transmettre de manière appropriée leur objectif aux technologies d'assistance telles que lecteurs d'écran.

Lien
html 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Boutons de contour

Vous avez besoin d'un bouton, mais pas des couleurs d'arrière-plan lourdes qu'ils apportent ? Remplacez les classes de modificateur par défaut par .btn-outline-*celles qui suppriment toutes les images et couleurs d'arrière-plan sur n'importe quel bouton.

html 
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Certains styles de boutons utilisent une couleur de premier plan relativement claire et ne doivent être utilisés que sur un arrière-plan sombre afin d'avoir un contraste suffisant.

Tailles

Envie de boutons plus grands ou plus petits ? Ajoutez .btn-lgou .btn-smpour des tailles supplémentaires.

html 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
html 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Vous pouvez même lancer votre propre dimensionnement personnalisé avec des variables CSS :

html 
<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

État désactivé

Rendez les boutons inactifs en ajoutant l' disabledattribut booléen à n'importe quel <button>élément. Les boutons désactivés se sont pointer-events: noneappliqués à, empêchant le survol et les états actifs de se déclencher.

html 
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Les boutons désactivés utilisant l' <a>élément se comportent un peu différemment :

  • <a>s ne prennent pas en charge l' disabledattribut, vous devez donc ajouter la .disabledclasse pour qu'elle apparaisse visuellement désactivée.
  • Certains styles adaptés à l'avenir sont inclus pour désactiver tous pointer-eventsles boutons d'ancrage.
  • Les boutons désactivés utilisant <a>doivent inclure l' aria-disabled="true"attribut pour indiquer l'état de l'élément aux technologies d'assistance.
  • Les boutons désactivés utilisant <a> ne doivent pas inclure l' hrefattribut.
Lien principal Lien
html 
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Pour couvrir les cas où vous devez conserver l' hrefattribut sur un lien désactivé, la .disabledclasse utilise pointer-events: nonepour essayer de désactiver la fonctionnalité de lien de <a>s. Notez que cette propriété CSS n'est pas encore normalisée pour HTML, mais tous les navigateurs modernes la prennent en charge. De plus, même dans les navigateurs prenant en charge pointer-events: none, la navigation au clavier reste inchangée, ce qui signifie que les utilisateurs de clavier voyants et les utilisateurs de technologies d'assistance pourront toujours activer ces liens. Donc, pour être sûr, en plus de aria-disabled="true", incluez également un tabindex="-1"attribut sur ces liens pour les empêcher de recevoir le focus du clavier et utilisez un JavaScript personnalisé pour désactiver complètement leur fonctionnalité.

Lien principal Lien
html 
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Bloquer les boutons

Créez des piles réactives de "boutons de blocage" pleine largeur comme ceux de Bootstrap 4 avec un mélange de nos utilitaires d'affichage et d'écart. En utilisant des utilitaires au lieu de classes spécifiques aux boutons, nous avons un bien meilleur contrôle sur l'espacement, l'alignement et les comportements réactifs.

html 
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Ici, nous créons une variante réactive, en commençant par des boutons empilés verticalement jusqu'au point d' mdarrêt, où .d-md-blockremplace la .d-gridclasse, annulant ainsi l' gap-2utilité. Redimensionnez votre navigateur pour les voir changer.

html 
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Vous pouvez ajuster la largeur de vos boutons de bloc avec des classes de largeur de colonne de grille. Par exemple, pour un "bouton bloc" demi-largeur, utilisez .col-6. Centrez-le également horizontalement avec .mx-auto.

html 
<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Des utilitaires supplémentaires peuvent être utilisés pour ajuster l'alignement des boutons lorsqu'ils sont horizontaux. Ici, nous avons repris notre exemple responsive précédent et ajouté quelques utilitaires flexibles et un utilitaire de marge sur le bouton pour aligner à droite les boutons lorsqu'ils ne sont plus empilés.

html 
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plug-in de bouton

Le plugin de bouton vous permet de créer de simples boutons à bascule marche/arrêt.

Visuellement, ces boutons bascule sont identiques aux boutons bascule de case à cocher . Cependant, ils sont véhiculés différemment par les technologies d'assistance : les bascules de cases à cocher seront annoncées par les lecteurs d'écran comme "cochées"/"non cochées" (puisque, malgré leur apparence, ce sont fondamentalement toujours des cases à cocher), alors que ces boutons bascules seront annoncés comme "bouton"/"bouton enfoncé". Le choix entre ces deux approches dépendra du type de bascule que vous créez et du fait que la bascule ait ou non un sens pour les utilisateurs lorsqu'elle est annoncée comme une case à cocher ou comme un bouton réel.

Basculer les états

Ajouter data-bs-toggle="button"pour basculer l'état d'un bouton active. Si vous pré-basculez un bouton, vous devez ajouter manuellement la .activeclasse et aria-pressed="true" vous assurer qu'elle est transmise de manière appropriée aux technologies d'assistance.

html 
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Basculer le lien Lien bascule actif Lien bascule désactivé
html 
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Méthodes

Vous pouvez créer une instance de bouton avec le constructeur de bouton, par exemple :

const bsButton = new bootstrap.Button('#myButton')
Méthode La description
dispose Détruit le bouton d'un élément. (Supprime les données stockées sur l'élément DOM)
getInstance Méthode statique qui permet d'obtenir l'instance du bouton associé à un élément DOM, vous pouvez l'utiliser comme ceci : bootstrap.Button.getInstance(element).
getOrCreateInstance Méthode statique qui renvoie une instance de bouton associée à un élément DOM ou en crée une nouvelle au cas où elle n'aurait pas été initialisée. Vous pouvez l'utiliser comme ceci : bootstrap.Button.getOrCreateInstance(element).
toggle Bascule l'état de poussée. Donne au bouton l'apparence qu'il a été activé.

Par exemple, pour basculer tous les boutons

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

variables

Ajouté dans v5.2.0

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les boutons utilisent désormais des variables CSS locales .btnpour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Chaque .btn-*classe de modificateur met à jour les variables CSS appropriées pour minimiser les règles CSS supplémentaires avec nos button-variant(), button-outline-variant()et button-size()mixins.

Voici un exemple de création d'une .btn-*classe de modificateur personnalisée comme nous le faisons pour les boutons uniques à nos documents en réaffectant les variables CSS de Bootstrap avec un mélange de nos propres variables CSS et Sass.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Variables SSS

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Mélanges sass

Il existe trois mixins pour les boutons : les mixins de variante de contour de bouton et de bouton (tous deux basés sur $theme-colors), plus un mixin de taille de bouton.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Boucles impertinentes

Les variantes de bouton (pour les boutons réguliers et contours) utilisent leurs mixins respectifs avec notre $theme-colorscarte pour générer les classes de modificateurs dans scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}