Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Tutup tombol

Tombol tutup umum untuk menutup konten seperti modal dan peringatan.

Contoh

Berikan opsi untuk mengabaikan atau menutup komponen dengan .btn-close. Gaya default terbatas, tetapi sangat dapat disesuaikan. Ubah variabel Sass untuk menggantikan default background-image. Pastikan untuk menyertakan teks untuk pembaca layar , seperti yang telah kita lakukan dengan aria-label.

html
<button type="button" class="btn-close" aria-label="Close"></button>

Status dinonaktifkan

Tombol tutup yang dinonaktifkan mengubah opacity. Kami juga telah menerapkan pointer-events: nonedan user-select: nonemencegah status melayang dan aktif memicu.

html
<button type="button" class="btn-close" disabled aria-label="Close"></button>

varian putih

Ubah default .btn-closemenjadi putih dengan .btn-close-whitekelas. Kelas ini menggunakan filterproperti untuk membalikkan file background-image.

html
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>

Kelancangan

Variabel

$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);