Modal

Modal menampilkan jendela tambahan di atas halaman utama untuk menarik perhatian pengguna pada informasi penting, keputusan, atau tindakan tertentu. Komponen ini bersifat blocking, sehingga pengguna perlu menyelesaikan interaksi di dalam modal sebelum kembali ke halaman utama.

Penggunaan

Gunakan Modal untuk membantu pengguna berinteraksi dengan informasi penting tanpa meninggalkan konteks halaman utama. Modal dapat digunakan untuk menampilkan peringatan atau konfirmasi, menunjukkan detail tambahan, atau memfasilitasi formulir dan proses singkat. Pastikan modal tetap fokus pada satu tujuan dan tidak memuat terlalu banyak informasi atau elemen interaktif.

Global Confirmation Integration

Confirmation Provider Setup

ConfirmationProvider memungkinkan Anda memanggil modal konfirmasi secara imperatif menggunakan promise, tanpa perlu me-manage state isOpen atau render modal secara manual di setiap komponen.

React

import { ConfirmationProvider } from '@idds/react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <ConfirmationProvider>
    <App />
  </ConfirmationProvider>
);

Vue

<template>
  <ConfirmationProvider>
    <router-view />
  </ConfirmationProvider>
</template>

<script setup lang="ts">
import { ConfirmationProvider } from '@idds/vue';
</script>

Penggunaan (useConfirmation Hook)

Gunakan hook useConfirmation untuk menampilkan modal. Fungsi confirm() mengembalikan Promise yang akan resolve ke true (dikonfirmasi) atau false (dibatalkan).

React

import { useConfirmation, Button } from '@idds/react';

export default function DeleteItem() {
  const { confirm } = useConfirmation();

  const handleDelete = async () => {
    // Memunculkan modal konfirmasi
    // Promise resolve dengan true jika user klik "Konfirmasi/Ya", false jika "Batal"
    const isConfirmed = await confirm({
      title: 'Hapus Data?',
      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
      confirmText: 'Hapus',
      cancelText: 'Batal',
      confirmClassName: 'bg-red-600 hover:bg-red-700', // Custom class untuk tombol konfirmasi
    });

    if (isConfirmed) {
      console.log('User confirmed deletion');
      // Lakukan aksi hapus di sini
    }
  };

  return <Button onClick={handleDelete} className="bg-red-600 hover:bg-red-700 text-white border-none">Hapus Item</Button>;
}

Live Preview:

Vue

<script setup lang="ts">
import { useConfirmation, Button } from '@idds/vue';

const { confirm } = useConfirmation();

const handleDelete = async () => {
  const isConfirmed = await confirm({
    title: 'Hapus Data?',
    message: 'Apakah Anda yakin ingin menghapus data ini?',
    confirmText: 'Hapus',
    cancelText: 'Batal',
    confirmClassName: 'bg-red-600 hover:bg-red-700',
  });

  if (isConfirmed) {
    console.log('User confirmed deletion');
  }
};
</script>

<template>
  <Button @click="handleDelete" variant="error">Hapus Item</Button>
</template>

Anatomi

Varian

Alert

Gunakan komponen ini untuk menarik perhatian penuh pengguna.Biasanya muncul otomatis dari sistem, bukan dari tindakan pengguna.Komponen ini hanya memiliki satu aksi dan tidak dapat ditutup sebelum aksi tersebut diselesaikan.

Confirm

Digunakan untuk meminta konfirmasi atau persetujuan pengguna sebelum melanjutkan tindakan penting, seperti menghapus data. Menyediakan dua opsi aksi, dan akan tertutup setelah salah satu aksi dipilih.

Task

Gunakan komponen ini untuk membantu pengguna menyelesaikan tugas tertentu atau menampilkan informasi tambahan. Pengguna dapat menutupnya kapan saja melalui tombol Close.Kontennya bisa berupa formulir, detail program, atau tahapan proses. Pengguna dapat menutupnya kapan saja melalui tombol Close.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan alert hanya untuk pesan penting yang membutuhkan perhatian pengguna.

❌ Dihindari

Hindari menampilkan terlalu banyak alert sekaligus.

✅ Disarankan

Idealnya isi pesan tidak lebih dari tiga baris agar mudah dibaca.

❌ Dihindari

Jangan gunakan teks panjang yang mengaburkan pesan utama.

Penerapan

Modal Onboarding di Dashboard

Modal dapat digunakan sebagai elemen onboarding untuk memperkenalkan fitur baru atau menampilkan informasi penting pertama kali saat pengguna masuk ke halaman utama.

Modal jenis ini biasanya berisi visual pendukung, pesan ringkas, serta tombol tindakan yang mengarahkan pengguna ke langkah berikutnya.

Spesifikasi