Callout

1. Ikon Utama: Mewakili jenis Callout (contohnya, kejayaan, kesilapan, maklumat).
2. Tajuk: Teks utama yang menyampaikan mesej penting Callout.
3. Deskripsi: Teks tambahan yang menyediakan konteks atau butiran lanjut.
4. Ikon Tutup (Tidak Wajib): Ikon yang membolehkan pengguna menutup Callout secara manual.
5. Tindakan Utama (Tidak Wajib): Butang yang membolehkan pengguna mengambil tindakan penting yang berkaitan dengan Callout, seperti "Cuba Semula" atau "Teruskan".
6. Tindakan Sekunder (Tidak Wajib): Butang tambahan yang menyediakan tindakan tambahan, biasanya digunakan untuk tindakan kurang penting seperti "Ketahui Lebih Lanjut" atau "Batal".

Jenis

1. Berjaya: Menunjukkan bahawa tindakan pengguna berjaya, seperti "Borang berjaya dihantar" atau "Data disimpan".
2. Amaran: Meminta pengguna memberi perhatian kepada sesuatu yang penting, seperti "Sesi anda akan tamat tidak lama lagi" atau "Kata laluan lemah".
3. Maklumat: Memberi maklumat berguna atau penting kepada pengguna yang tidak kritikal tetapi berguna, seperti "Kemaskini baharu tersedia" atau "Tetapan anda telah disimpan".
4. Kesilapan: Menunjukkan ralat yang perlu diselesaikan sebelum meneruskan, seperti "Gagal menyambung" atau "Ralat penghantaran borang".

Ikon tutup

1. Ikon Tutup (Tidak Wajib): Dalam beberapa kes, pengguna boleh mengklik ikon tutup untuk menutup komponen Callout.

   Ini berguna untuk Callout tidak kritikal yang boleh ditutup secara manual oleh pengguna.

Butang tindakan

1. Butang Tindakan Utama: Biasanya menggunakan gaya Butang Sekunder untuk tindakan penting berkaitan Callout, seperti "Cuba Semula", "Simpan Perubahan", atau "Teruskan".
2. Butang Tindakan Sekunder: Sering menggunakan gaya Butang Tertiari dan tidak wajib. Digunakan untuk tindakan yang kurang penting seperti "Batal" atau "Tutup". Ia juga boleh digunakan untuk tugas sokongan seperti "Ketahui Lebih Lanjut".

Contoh penggunaan

Borang

Lokasi: Callout muncul apabila pengguna melakukan tindakan dalam borang atau modal, menunjukkan hasil sama ada berjaya, ralat, amaran, atau maklumat.

Lebar: Callout biasanya mempunyai lebar penuh, menyesuaikan diri dengan saiz kontena atau skrin (seperti modal, borang, atau halaman penuh) untuk memastikan Callout dapat dilihat dengan jelas oleh pengguna.

Halaman

Lokasi: Letakkan di bahagian atas kandungan halaman supaya ia dapat dilihat dengan segera, membolehkan pengguna memahami pemberitahuan sebelum membaca kandungan lain.

Lebar: Callout biasanya mempunyai lebar penuh, menyesuaikan diri dengan saiz kontena atau skrin.