Tombol

Gunakan gaya tombol kustom Bootstrap untuk tindakan dalam formulir, dialog, dan lainnya dengan dukungan untuk berbagai ukuran, status, dan lainnya.

Di halaman ini

Contoh

Bootstrap menyertakan beberapa gaya tombol yang telah ditentukan, masing-masing melayani tujuan semantiknya sendiri, dengan beberapa tambahan untuk kontrol lebih.

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>

Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.

Nonaktifkan pembungkusan teks

Jika Anda tidak ingin teks tombol terbungkus, Anda dapat menambahkan .text-nowrapkelas ke tombol. Di Sass, Anda dapat mengatur $btn-white-space: nowrapuntuk menonaktifkan pembungkusan teks untuk setiap tombol.

Tag tombol

Kelas .btndirancang untuk digunakan dengan <button>elemen. Namun, Anda juga dapat menggunakan kelas <a>atau <input>elemen ini (meskipun beberapa browser mungkin menerapkan rendering yang sedikit berbeda).

Saat menggunakan kelas tombol pada <a>elemen yang digunakan untuk memicu fungsionalitas dalam halaman (seperti menciutkan konten), daripada menautkan ke halaman atau bagian baru dalam halaman saat ini, tautan ini harus diberi a role="button"untuk menyampaikan tujuannya dengan tepat ke teknologi pendukung seperti pembaca layar.

Tautan

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

Tombol garis besar

Membutuhkan tombol, tetapi bukan warna latar belakang yang besar dan kuat yang mereka bawa? Ganti kelas pengubah default dengan .btn-outline-*yang menghapus semua gambar dan warna latar belakang pada tombol apa pun.

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>

Beberapa gaya tombol menggunakan warna latar depan yang relatif terang, dan hanya boleh digunakan pada latar belakang gelap agar memiliki kontras yang memadai.

ukuran

Ingin tombol yang lebih besar atau lebih kecil? Tambahkan .btn-lgatau .btn-smuntuk ukuran tambahan.

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>

Anda bahkan dapat menggulung ukuran kustom Anda sendiri dengan variabel 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>

Status dinonaktifkan

Buat tombol terlihat tidak aktif dengan menambahkan disabledatribut boolean ke <button>elemen apa pun. Tombol yang dinonaktifkan telah pointer-events: nonediterapkan, mencegah pemicuan kursor dan status aktif.

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>

Tombol yang dinonaktifkan menggunakan <a>elemen berperilaku sedikit berbeda:

<a>s tidak mendukung disabledatribut tersebut, jadi Anda harus menambahkan .disabledkelas agar tampak dinonaktifkan secara visual.
Beberapa gaya ramah masa depan disertakan untuk menonaktifkan semua pointer-eventstombol jangkar.
Penggunaan tombol yang dinonaktifkan <a>harus menyertakan aria-disabled="true"atribut untuk menunjukkan status elemen ke teknologi bantu.
Penggunaan tombol yang dinonaktifkan <a> tidak boleh menyertakan hrefatribut.

Tautan utama Tautan

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>

Peringatan fungsionalitas tautan

Untuk menutupi kasus di mana Anda harus menyimpan hrefatribut pada tautan yang dinonaktifkan, .disabledkelas menggunakan pointer-events: noneuntuk mencoba menonaktifkan fungsionalitas tautan <a>s. Perhatikan bahwa properti CSS ini belum distandarisasi untuk HTML, tetapi semua browser modern mendukungnya. Selain itu, bahkan di browser yang mendukung pointer-events: none, navigasi keyboard tetap tidak terpengaruh, artinya pengguna keyboard yang dapat melihat dan pengguna teknologi bantu masih dapat mengaktifkan tautan ini. Jadi agar aman, selain aria-disabled="true", sertakan juga tabindex="-1"atribut pada tautan ini untuk mencegahnya menerima fokus keyboard, dan gunakan JavaScript khusus untuk menonaktifkan fungsinya sama sekali.

Tautan utama Tautan

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>

Blokir tombol

Buat tumpukan responsif "tombol blok" lebar penuh seperti yang ada di Bootstrap 4 dengan campuran utilitas tampilan dan celah kami. Dengan menggunakan utilitas alih-alih kelas khusus tombol, kami memiliki kontrol yang jauh lebih besar atas spasi, penyelarasan, dan perilaku responsif.

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>

Di sini kita membuat variasi responsif, dimulai dengan tombol yang ditumpuk secara vertikal hingga mdbreakpoint, di mana .d-md-blockmenggantikan .d-gridkelas, sehingga meniadakan gap-2utilitas. Ubah ukuran browser Anda untuk melihatnya berubah.

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>

Anda dapat menyesuaikan lebar tombol blok Anda dengan kelas lebar kolom kotak. Misalnya, untuk "tombol blokir" setengah lebar, gunakan .col-6. Pusatkan secara horizontal dengan .mx-auto, juga.

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>

Utilitas tambahan dapat digunakan untuk menyesuaikan perataan tombol saat horizontal. Di sini kami telah mengambil contoh responsif kami sebelumnya dan menambahkan beberapa utilitas fleksibel dan utilitas margin pada tombol untuk menyelaraskan tombol saat tidak lagi ditumpuk.

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>

Plugin tombol

Plugin tombol memungkinkan Anda membuat tombol sakelar hidup/mati sederhana.

Secara visual, tombol sakelar ini identik dengan tombol sakelar kotak centang . Namun, mereka disampaikan secara berbeda oleh teknologi bantu: sakelar kotak centang akan diumumkan oleh pembaca layar sebagai "dicentang"/"tidak dicentang" (karena, terlepas dari penampilannya, mereka pada dasarnya masih kotak centang), sedangkan tombol sakelar ini akan diumumkan sebagai "tombol"/"tombol ditekan". Pilihan antara dua pendekatan ini akan bergantung pada jenis sakelar yang Anda buat, dan apakah sakelar itu masuk akal atau tidak bagi pengguna saat diumumkan sebagai kotak centang atau sebagai tombol sebenarnya.

Alihkan status

Tambahkan data-bs-toggle="button"untuk mengaktifkan status tombol active. Jika Anda melakukan pra-beralih tombol, Anda harus menambahkan .activekelas secara manual dan aria-pressed="true" untuk memastikan bahwa itu disampaikan dengan tepat ke teknologi bantu.

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>

Alihkan tautan Tautan sakelar aktif Tautan sakelar yang dinonaktifkan

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>

Metode

Anda dapat membuat instance tombol dengan konstruktor tombol, misalnya:

const bsButton = new bootstrap.Button('#myButton')

metode	Keterangan
`dispose`	Menghancurkan tombol elemen. (Menghapus data yang tersimpan pada elemen DOM)
`getInstance`	Metode statis yang memungkinkan Anda mendapatkan instance tombol yang terkait dengan elemen DOM, Anda dapat menggunakannya seperti ini: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Metode statis yang mengembalikan instance tombol yang terkait dengan elemen DOM atau membuat yang baru jika tidak diinisialisasi. Anda dapat menggunakannya seperti ini: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Mengalihkan status push. Memberikan tampilan tombol yang telah diaktifkan.

Misalnya, untuk mengaktifkan semua tombol

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

CSS

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, tombol sekarang menggunakan variabel CSS lokal .btnuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

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

Setiap .btn-*kelas pengubah memperbarui variabel CSS yang sesuai untuk meminimalkan aturan CSS tambahan dengan button-variant(), button-outline-variant(), dan button-size()mixin kami.

Berikut adalah contoh membangun .btn-*kelas pengubah kustom seperti yang kita lakukan untuk tombol unik untuk dokumen kita dengan menetapkan kembali variabel CSS Bootstrap dengan campuran variabel CSS dan Sass kita sendiri.

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

Variabel Sass

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

Campur aduk

Ada tiga mixin untuk tombol: mixin varian garis besar tombol dan tombol (keduanya berdasarkan $theme-colors), ditambah mixin ukuran tombol.

@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

Varian tombol (untuk tombol biasa dan garis besar) menggunakan mixin masing-masing dengan $theme-colorspeta kami untuk menghasilkan kelas pengubah di 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);
  }
}