Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

On this page

Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<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>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Disable text wrapping

If you don’t want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

Button tags

Klassene .btner laget for å brukes med <button>elementet. Du kan imidlertid også bruke disse klassene på <a>eller <input>elementer (selv om noen nettlesere kan bruke en litt annen gjengivelse).

Når du bruker knappeklasser på <a>elementer som brukes til å utløse funksjonalitet på siden (som kollapsende innhold), i stedet for å lenke til nye sider eller seksjoner på den gjeldende siden, bør disse koblingene gis en role="button"for å formidle hensikten deres til hjelpeteknologier som f.eks. skjermlesere.

Link

<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">

Konturknapper

Trenger du en knapp, men ikke de heftige bakgrunnsfargene de kommer med? Erstatt standard modifikatorklassene med .btn-outline-*de for å fjerne alle bakgrunnsbilder og farger på en hvilken som helst knapp.

<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>

Noen av knappestilene bruker en relativt lys forgrunnsfarge, og bør kun brukes på en mørk bakgrunn for å ha tilstrekkelig kontrast.

Størrelser

Lyst på større eller mindre knapper? Legg til .btn-lgeller .btn-smfor flere størrelser.

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

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

Deaktivert tilstand

Få knapper til å se inaktive ut ved å legge til det disabledboolske attributtet til ethvert <button>element. Deaktiverte knapper har pointer-events: noneaktivert, og hindrer sveving og aktive tilstander fra å utløses.

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

Deaktiverte knapper som bruker <a>elementet oppfører seg litt annerledes:

<a>s støtter ikke disabledattributtet, så du må legge til .disabledklassen for å få den visuelt til å virke deaktivert.
Noen fremtidsvennlige stiler er inkludert for å deaktivere alle pointer-eventspå ankerknapper.
Deaktiverte knapper som bruker <a>, bør inkludere aria-disabled="true"attributtet for å indikere tilstanden til elementet til hjelpeteknologier.
Deaktiverte knapper som bruker <a> skal ikke inkludere hrefattributtet.

Primær lenke Link

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Advarsel om lenkefunksjonalitet

For å dekke tilfeller der du må beholde hrefattributtet på en deaktivert lenke, .disabledbruker klassen pointer-events: nonefor å prøve å deaktivere lenkefunksjonaliteten til <a>s. Merk at denne CSS-egenskapen ennå ikke er standardisert for HTML, men alle moderne nettlesere støtter den. I tillegg, selv i nettlesere som støtter pointer-events: none, forblir tastaturnavigasjon upåvirket, noe som betyr at seende tastaturbrukere og brukere av hjelpeteknologi fortsatt vil kunne aktivere disse koblingene. Så for å være sikker, i tillegg til aria-disabled="true", inkluderer du også et tabindex="-1"attributt på disse koblingene for å hindre dem i å motta tastaturfokus, og bruk tilpasset JavaScript for å deaktivere funksjonaliteten deres helt.

Primær lenke Link

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

Blokker knapper

Lag responsive stabler med "blokkknapper" i full bredde som de i Bootstrap 4 med en blanding av skjerm- og gap-verktøyene våre. Ved å bruke verktøy i stedet for knappespesifikke klasser, har vi mye større kontroll over avstand, justering og responsiv atferd.

<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>

Her lager vi en responsiv variant, som starter med vertikalt stablede knapper til mdbruddpunktet, der .d-md-blockerstatter .d-gridklassen, og dermed ugyldiggjør gap-2verktøyet. Endre størrelsen på nettleseren din for å se dem endres.

<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>

Du kan justere bredden på blokkknappene med rutenettskolonnebreddeklasser. For eksempel, for en halvbredde "blokkknapp", bruk .col-6. Sentrer den horisontalt med .mx-autoogså.

<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>

Ytterligere verktøy kan brukes til å justere justeringen av knappene når de er horisontale. Her har vi tatt vårt tidligere responsive eksempel og lagt til noen flex-verktøy og et margin-verktøy på knappen for å høyrejustere knappene når de ikke lenger er stablet.

<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>

Knapp-plugin

Knappe-pluginen lar deg lage enkle på/av-veksleknapper.

Visuelt er disse veksleknappene identiske med vekslingsknappene for avmerkingsboksen . Imidlertid formidles de annerledes av hjelpeteknologier: avkrysningsboksene vil bli annonsert av skjermlesere som "avmerket"/"ikke avmerket" (siden, til tross for utseendet, er de i utgangspunktet fortsatt avmerkingsbokser), mens disse veksleknappene vil bli annonsert som "knapp"/"knapp trykket". Valget mellom disse to tilnærmingene vil avhenge av hvilken type veksler du oppretter, og hvorvidt vekslingen vil gi mening for brukere når den annonseres som en avkrysningsboks eller som en faktisk knapp.

Veksle mellom tilstander

Legg data-bs-toggle="button"til for å veksle mellom en knapps activetilstand. Hvis du forhåndsveksler en knapp, må du legge til .activeklassen manuelt og aria-pressed="true" for å sikre at den formidles riktig til hjelpeteknologier.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>

Slå på koblingen Aktiv vekselkobling Deaktivert av/på-kobling

<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>

Metoder

Du kan opprette en knappeforekomst med knappekonstruktøren, for eksempel:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Metode	Beskrivelse
`toggle`	Bytter push-tilstand. Gir knappen det utseendet at den er aktivert.
`dispose`	Ødelegger knappen til et element. (Fjerner lagrede data på DOM-elementet)
`getInstance`	Statisk metode som lar deg få knappeforekomsten knyttet til et DOM-element, du kan bruke den slik:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Statisk metode som returnerer en knappeinstans knyttet til et DOM-element eller oppretter en ny i tilfelle den ikke ble initialisert. Du kan bruke det slik:`bootstrap.Button.getOrCreateInstance(element)`

For eksempel for å veksle mellom alle knapper

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Variabler

$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:              $link-color;
$btn-link-hover-color:        $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%;

Mixins

Det er tre blandinger for knapper: knapp- og knappomrissvarianter (begge basert på $theme-colors), pluss en knappstørrelsesmiks.

@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)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    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)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Løkker

Knappvarianter (for vanlige knapper og konturknapper) bruker sine respektive mikser med $theme-colorskartet vårt for å generere modifikatorklassene i scss/_buttons.scss.

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

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