Tombol sekunder
Untuk pilihan 'belum sekarang' yang harus berdiri di sebelah tombol utama.
Pratinjau langsung
Sumber
<button type="button" class="dc-sbtn">취소</button>.dc-sbtn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-2);
min-height: 44px; padding: 0 var(--dc-5);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-family: var(--dc-font); font-size: 15px; font-weight: 600; line-height: 1;
white-space: nowrap;
transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-sbtn:hover,
.dc-sbtn.is-hover { background: var(--dc-sunken); border-color: var(--dc-text-sub); }
.dc-sbtn[disabled] {
background: var(--dc-sunken); color: var(--dc-text-mute);
border-color: var(--dc-line); cursor: not-allowed;
}
.dc-sbtn--quiet { background: transparent; border-color: transparent; color: var(--dc-brand-text); }
.dc-sbtn--quiet:hover { background: var(--dc-brand-soft); border-color: transparent; }
.dc-sbtn__icon { width: 18px; height: 18px; flex: none; }Cara memakainya
- Pakai untuk aksi yang membatalkan: batal, nanti, kembali
- Saat berdampingan, biarkan mata tertuju ke tombol utama lebih dulu
- Maksimal dua dalam satu baris — bobot yang sama menyulitkan pilihan
Hal yang perlu diwaspadai
- Pakai --dc-line-field untuk garis tepi; --dc-line hanya hiasan dan tidak terbaca bisa ditekan
- Varian redup hanya cocok bila ada kontrol lain di sekitarnya; berdiri sendiri, tak ada yang sadar itu tombol