CSS: callout

div[class~="instui-callout"] — Pemberitahuan informasi inline untuk pengingat atau catatan singkat.

✅ Gunakan Callout ketika:

• Anda perlu menyorot informasi penting atau pengingat secara inline

• Pesannya relatif singkat (satu kalimat hingga paragraf pendek)

• Pemberitahuan harus menarik perhatian tanpa mengganggu alur utama 🚫 Jangan gunakan Callout ketika:

• Pesan memerlukan interaksi atau beberapa tindakan — gunakan Modal atau Alert Dialog

• Konten adalah fokus utama halaman — gunakan tata letak Card atau Hero sebagai gantinya

Aksesibilitas

• Pastikan role alert diterapkan dengan benar (role="alert" atau role="status")
• Gunakan kontras warna semantik yang memenuhi standar WCAG AA
• Jangan mengandalkan warna saja untuk menyampaikan makna

Penggunaan

@import "@pantoken/plugin-layouts/layouts.css";

Contoh

Slot

Slot	Deskripsi
message	Konten pesan alert

Bagian

Bagian	Deskripsi
.instui-content	Kontainer untuk konten teks.
.instui-icon	Ikon opsional di sebelah kiri konten.

Pseudo-elemen

Pseudo-elemen	Deskripsi
::before	—

Status

Status	Deskripsi
:optional	—

Token yang digunakan

Token	Tipe	Nilai
--instui-color-info-background	—	—
--instui-color-info-border	—	—
--instui-color-info-text	—	—
--instui-radius-medium	—	—
--instui-size-small	<length>	—
--instui-space-medium	—	—
--instui-space-small	—	—

Terkait

• alert