Modal

Dialog yang menahan fokus di dalamnya, menutup dengan Esc atau klik latar, dan mengembalikan fokus ke tombol pemicu. Empat ukuran: sm 384 · md 512 · lg 672 · xl 896 px.

Modal konfirmasi

Aksi merusak selalu di kanan dan diberi warna bahaya.

Lihat kode

<button class="ck-btn ck-btn--destructive" data-ck-open="md-hapus"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg> Hapus kuis</button>
<div class="ck-overlay" id="md-hapus" hidden>
  <div class="ck-overlay__backdrop"></div>
  <div class="ck-modal ck-modal--sm" role="dialog" aria-modal="true" aria-labelledby="md-hapus-t">
    <div class="ck-modal__header">
      <div><div class="ck-modal__title" id="md-hapus-t">Hapus kuis ini?</div>
      <p class="ck-modal__desc">32 jawaban siswa akan ikut terhapus. Tindakan ini tidak bisa dibatalkan.</p></div>
      <button class="ck-modal__close" data-ck-close aria-label="Tutup"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
    </div>
    <div class="ck-modal__footer">
      <button class="ck-btn ck-btn--ghost" data-ck-close>Batal</button>
      <button class="ck-btn ck-btn--destructive" data-ck-close>Ya, hapus</button>
    </div>
  </div>
</div>

Modal formulir

Header, isi yang bisa digulir, dan footer menempel. Isi tetap bisa digulir bila layar pendek.

Lihat kode

<button class="ck-btn ck-btn--default" data-ck-open="md-soal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M12 5v14"/></svg> Soal baru</button>
<div class="ck-overlay" id="md-soal" hidden>
  <div class="ck-overlay__backdrop"></div>
  <div class="ck-modal ck-modal--lg" role="dialog" aria-modal="true" aria-labelledby="md-soal-t">
    <div class="ck-modal__header">
      <div><div class="ck-modal__title" id="md-soal-t">Tambah soal</div><p class="ck-modal__desc">Soal masuk ke Bank Soal dan bisa dipakai ulang.</p></div>
      <button class="ck-modal__close" data-ck-close aria-label="Tutup"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
    </div>
    <div class="ck-modal__body ck-stack ck-stack-4">
      <div class="ck-field"><label class="ck-label" for="ms-1">Pertanyaan</label><textarea class="ck-textarea" id="ms-1" placeholder="Tulis pertanyaan…"></textarea></div>
      <div class="ck-field"><label class="ck-label" for="ms-2">Mapel</label><select class="ck-select" id="ms-2"><option>Matematika</option><option>Fisika</option><option>Kimia</option></select></div>
      <div class="ck-row ck-row-4"><div class="ck-field ck-grow"><label class="ck-label" for="ms-3">Tingkat</label><select class="ck-select" id="ms-3"><option>Mudah</option><option>Sedang</option><option>Sulit</option></select></div>
      <div class="ck-field ck-grow"><label class="ck-label" for="ms-4">Poin</label><input class="ck-input" id="ms-4" type="number" value="5"></div></div>
    </div>
    <div class="ck-modal__footer">
      <button class="ck-btn ck-btn--ghost" data-ck-close>Batal</button>
      <button class="ck-btn ck-btn--default" data-ck-close>Simpan soal</button>
    </div>
  </div>
</div>