Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Hộp thoại cảnh báo

Dùng ngay trước một việc khó hoàn lại — nó chặn giữa màn hình và hỏi đúng một lần.

Lớp phủ

Xem trước trực tiếp

Nguồn

<div class="dc-alrt-stage">
  <div class="dc-alrt-scrim" aria-hidden="true"></div>
  <div class="dc-alrt" role="alertdialog" aria-modal="true" aria-labelledby="dc-alrt-t" aria-describedby="dc-alrt-d">
    <h2 class="dc-alrt__title" id="dc-alrt-t">위치 정보를 쓸까요?</h2>
    <p class="dc-alrt__text" id="dc-alrt-d">가까운 매장을 먼저 보여 주는 데만 씁니다. 나중에 설정에서 끌 수 있습니다.</p>
    <div class="dc-alrt__acts">
      <button class="dc-alrt__btn" type="button">안 쓰기</button>
      <button class="dc-alrt__btn dc-alrt__btn--strong" type="button">쓸게요</button>
    </div>
  </div>
</div>
.dc-alrt-stage {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 420px; padding: var(--dc-6);
  background: var(--dc-bg);
  border-radius: var(--dc-r-md);
  font-family: var(--dc-font);
}
.dc-alrt-scrim { position: absolute; inset: 0; background: var(--dc-overlay); }
.dc-alrt {
  position: relative;
  width: 100%; max-width: 300px;
  padding: var(--dc-6) var(--dc-5) var(--dc-5);
  background: var(--dc-surface);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg);
  box-shadow: var(--dc-sh-3);
  text-align: center;
}
.dc-alrt__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0 auto var(--dc-3);
  border-radius: var(--dc-r-full);
  background: var(--dc-danger-soft); color: var(--dc-danger);
}
.dc-alrt__ico svg { width: 24px; height: 24px; }
.dc-alrt__title { margin: 0 0 var(--dc-2); font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--dc-text); }
.dc-alrt__text { margin: 0; font-size: 13px; line-height: 1.75; color: var(--dc-text-sub); }
.dc-alrt__note { margin: var(--dc-2) 0 0; font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--dc-danger); }
.dc-alrt__acts { display: flex; gap: var(--dc-2); margin-top: var(--dc-6); }
.dc-alrt__acts--stack { flex-direction: column; }
.dc-alrt__btn {
  flex: 1 1 auto; min-height: 46px; padding: 0 var(--dc-3);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 14px; font-weight: 600;
  transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-alrt__btn:active { background: var(--dc-sunken); }
.dc-alrt__btn--strong { border-color: var(--dc-brand); background: var(--dc-brand); color: var(--dc-text-on); }
.dc-alrt__btn--strong:active { background: var(--dc-brand-hi); border-color: var(--dc-brand-hi); }
.dc-alrt__btn--danger { border-color: var(--dc-danger); background: var(--dc-danger); color: var(--dc-text-on); }
.dc-alrt__btn--danger:active { background: color-mix(in srgb, var(--dc-danger) 84%, var(--dc-text)); }

Cách dùng

  • Tiêu đề là câu hỏi, nút là câu trả lời: 'Xoá tài khoản' / 'Để nguyên', đừng dùng OK / Huỷ
  • Nói rõ mất bao nhiêu, bằng số: '118 đơn hàng', không phải 'toàn bộ dữ liệu'
  • Nếu nội dung xuất hiện nhiều lần mỗi ngày, hãy hạ xuống thành toast
  • Hai nút không vừa một hàng thì xếp dọc, đặt nút nên chọn ở dưới

Điểm cần lưu ý

  • Thiếu role="alertdialog" và aria-modal, trình đọc vẫn đọc nội dung phía sau
  • Chạm nền để đóng sẽ gây huỷ ngoài ý muốn — chỉ cho nút đóng
  • Mỗi hộp thoại chỉ một nút đỏ, và tiêu điểm đầu tiên đặt ở lựa chọn an toàn

Tiếp theo