Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Buttons te a awm

Form, dialog leh thil dang danga action hrang hrang atan Bootstrap-a custom button styles hmang la, size hrang hrang, state leh thil dang tam tak support rawh.

He page ah hian

Entirna te

Bootstrap hian button style hrang hrang predefined a keng tel a, pakhat zel hian semantic purpose an nei vek a, control tam zawk neih nan extra tlemte an paih lut bawk.

html tih a ni 
<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>
Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hiddenclass nena thup belh thuziak ang chi a ni.

Text wrapping kha tihtawp theih a ni

Button text wrap duh loh chuan .text-nowrapclass chu button ah hian add theih a ni. $btn-white-space: nowrapSass ah chuan button tin tan text wrapping disable turin i set thei ang .

Button tags a awm bawk

Class te hi element .btnnena hman tur atana siam a ni . <button>Mahse, heng class te hi on <a>or <input>elements ah pawh i hmang thei bawk (browser thenkhat chuan rendering danglam deuh deuh an hmang thei nachungin).

<a>In -page functionality (collapsing content ang chi) trigger nana hman elements -a button class hman hunah , tuna page chhunga page thar emaw section thar emaw link ai chuan, heng link te hi a pek tur a ni a role="button", an thiltum chu assistive technology ang chi te hnena a dik taka thlen theih nan screen reader te a awm bawk.

Zawm
html tih a ni 
<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">

Outline button te chu a rawn lang a

Button mamawh, mahse hefty background colors an rawn ken te kha a ni lo em ni? Default modifier class te chu .btn-outline-*button eng pawha background image leh color zawng zawng paih vek theihna tur te nen thlak leh rawh.

html tih a ni 
<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>
Button style thenkhatah chuan foreground color light deuh deuh an hmang a, contrast tling tak neih theih nan background dum takah chauh hman tur a ni.

Size hrang hrang

Button lian zawk emaw te zawk emaw i duh em? Add .btn-lgemaw .btn-smsize dang atan emaw.

html tih a ni 
<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 tih a ni 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

CSS variable hmangin i custom sizing pawh i roll thei bawk:

html tih a ni 
<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>

Disabled state a ni

Element disabledeng pawhah boolean attribute dahin button te chu inactive angin siam rawh . <button>Disabled buttons te pointer-events: nonechu a apply tawh a, hover leh active state te trigger theih lohna tur a ni.

html tih a ni 
<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>

Element hmanga disabled button te chu <a>an awm dan a danglam deuh hlek a:

  • <a>s hian attribute an support lo a , chuvangin visually disabled anga lang turin class chu disabledi add a ngai a ni..disabled
  • Nakin lawka hman theih tur style thenkhat chu pointer-eventsanchor button-a awm zawng zawng tihtawp theihna tur a awm bawk.
  • Disabled buttons hmang <a>hian aria-disabled="true"assistive technology-te hnena element dinhmun tarlanna attribute a awm tur a ni.
  • Disabled button hmang hian attribute chu a tel <a> tur a ni lo .href
Primary link a ni Zawm
html tih a ni 
<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>

hrefDisabled link-a attribute dah tur case cover tur chuan .disabledclass chuan s- pointer-events: nonea link functionality tihtawp tumna a hmang thin. <a>He CSS property hi HTML atan standardized a la ni lo tih hre reng ang che, mahse tunlai browser zawng zawng hian an support vek a ni. Chu bakah, browser that do support pointer-events: none-ah pawh keyboard navigation chu a nghawng lo reng a, chu chu keyboard hmu thei leh assistive technology hmangtute chuan heng link te hi an la activate thei dawn tihna a ni. So to be safe, in addition to , heng links-ah hian keyboard focus an dawn loh nan attribute aria-disabled="true"dah tel bawk la, custom JavaScript hmangin an functionality chu tihtawp vek rawh.tabindex="-1"

Primary link a ni Zawm
html tih a ni 
<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>

Block button a awm bawk

Kan display leh gap utilities mix hmangin Bootstrap 4-a awm ang chi full-width, “block button” responsive stack siam rawh. Button bik class ai chuan utilities hmang hian spacing, alignment, leh responsive behavior-ah te thuneihna nasa zawk kan nei a ni.

html tih a ni 
<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>

Hetah hian responsive variation kan siam a, vertically stacked buttons atanga tanin mdbreakpoint thlengin, chutah chuan class .d-md-blocka thlak a , chutiang chuan utility .d-gridchu a nullify a ni. gap-2An inthlak danglam theih nan i browser size thlak rawh.

html tih a ni 
<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>

I block buttons zau zawng chu grid column width class hmangin i siamrem thei bawk. Entirnan, a chanve zau “block button” atan chuan .col-6. Centre chu horizontal-in .mx-auto, pawh a ni.

html tih a ni 
<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>

Utilities dang hmangin buttons alignment chu horizontal a nih chuan siamrem theih a ni. Hetah hian kan responsive example hmasa kha kan la a, flex utility thenkhat leh button-ah margin utility kan dah belh a, button-te chu an stack tawh loh hunah right align turin kan dah bawk.

html tih a ni 
<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>

Button plugin a awm bawk

Button plugin hmang hian on/off toggle button awlsam tak tak siam theih a ni.

Hmuh theih chuan heng toggle button te hi checkbox toggle button te nen an inang vek a ni . Mahse, assistive technology hmangin an hrilhfiah dan a danglam a: checkbox toggles te chu screen reader-te chuan “checked”/“not checked” tiin an puang ang (since, an hmel lan danah pawh, fundamentally still checkbox an nih tho avangin), chutih laiin heng toggle buttons te hi chutiang chuan an puang dawn a ni “button”/“button hmet” tih a ni. Heng approach pahnih inkara duhthlan tur hi i toggle siam chi hrang hrangah a innghat ang a, checkbox anga puan a nih hunah emaw, button tak tak anga puan a nih hunah emaw toggle hian users te tan awmzia a nei dawn em tih a innghat bawk ang.

Toggle state te chu

data-bs-toggle="button"Button pakhat dinhmun toggle turin add rawh active. Button i pre-toggling a nih chuan, .activeclass chu manual-in i add tur a ni a, assistive technology- te aria-pressed="true" hnena a dik taka a thlen theih nan.

html tih a ni 
<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>
Toggle link a awm bawk Active toggle link a awm bawk Toggle link kha tihtawp a ni
html tih a ni 
<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>

Thiltih dan tur

Button constructor hmangin button instance i siam thei a, entirnan:

const bsButton = new bootstrap.Button('#myButton')
Tihdan Hrilhfiahna
dispose Element pakhat button a tichhia. (DOM element-a data dahkhawmte a paih chhuak)
getInstance Static method hmanga DOM element nena inzawm button instance hmuh theihna tur, hetiang hian i hmang thei ang: bootstrap.Button.getInstance(element).
getOrCreateInstance Static method chu DOM element nena inzawm button instance rawn pe chhuak emaw, initialized a nih loh chuan a thar siam emaw a ni. Hetiang hian i hmang thei ang: bootstrap.Button.getOrCreateInstance(element).
toggle Push state a tidanglam. Button chu a activate tawh angin a lang.

Entirnan, button zawng zawng toggle tur

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

CSS a ni

Variables te pawh a awm

v5.2.0 ah dah belh a ni

Bootstrap-in CSS variables approach a kalpui mek zingah hian button-te chuan local CSS variables on hmangin .btnreal-time customization tihchangtlunna atan an hmang ta a ni. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

  --#{$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);

Modifier class tin hian kan , , leh mixins .btn-*hmangin CSS rules dang tih tlem nan CSS variable dik tak an update thin .button-variant()button-outline-variant()button-size()

Hetah hian .btn-*kan docs-a button danglam bikte tana kan tih ang chi custom modifier class siam dan entirnan Bootstrap-a CSS variable-te chu kan CSS leh Sass variable mixture hmanga reassign-in kan rawn tarlang e.

.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%)};
}

Sass a danglam thei

$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%;

Sass mixin te a awm

Button tan mixin pathum a awm a, chungte chu button leh button outline variant mixin (an pahnih hian based on $theme-colors), chubakah button size mixin a awm bawk.

@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};
}

Sass loop a ni

Button variant (regular leh outline button tan) chuan kan map nen an mixin hrang hrang hmangin $theme-colorsmodifier class te chu 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);
  }
}