Đến nội dung chính

Nút nguy hiểm

Chỉ dùng khi hành động không thể hoàn tác.

Nút và hành động

Xem trước trực tiếp

Nguồn

<button type="button" class="dc-dbtn">계정 삭제</button>
.dc-dbtn {
  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-danger); border-radius: var(--dc-r-sm);
  background: var(--dc-danger); color: var(--dc-text-on);
  font-family: var(--dc-font); font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-dbtn:hover {
  background: color-mix(in srgb, var(--dc-danger) 86%, var(--dc-text));
  border-color: color-mix(in srgb, var(--dc-danger) 86%, var(--dc-text));
}
.dc-dbtn[disabled] {
  background: var(--dc-sunken); color: var(--dc-text-mute);
  border-color: var(--dc-line); cursor: not-allowed;
}
.dc-dbtn--outline { background: transparent; color: var(--dc-danger); }
.dc-dbtn--outline:hover { background: var(--dc-danger-soft); color: var(--dc-danger); border-color: var(--dc-danger); }
.dc-dbtn__icon { width: 18px; height: 18px; flex: none; }

Cách dùng

  • Chỉ cho việc không thể phục hồi: xoá, huỷ gói, xoá sạch
  • Nêu rõ cái gì mất đi: 'Xoá tài khoản' thay vì chỉ 'Xoá'
  • Cho nó vai chính trong hộp xác nhận; trong danh sách thì hạ xuống dạng viền

Điểm cần lưu ý

  • Chỉ màu thôi không cảnh báo được — người không phân biệt màu đỏ chỉ thấy một nút
  • Nút đỏ ở mọi dòng làm sự nguy hiểm trở nên bình thường

Tiếp theo