CSS: callout ​

div[class~="instui-callout"] — แจ้งเตือนข้อมูลแบบอินไลน์สำหรับการเตือนหรือบันทึกสั้นๆ.

✅ ใช้ Callout เมื่อ:

  • เมื่อต้องเน้นข้อมูลสำคัญหรือการเตือนแบบอินไลน์

  • ข้อความค่อนข้างสั้น (หนึ่งประโยคถึงย่อหน้าสั้นๆ)

  • การแจ้งเตือนควรดึงความสนใจโดยไม่ขัดจังหวะกระแสหลัก 🚫 อย่าใช้ Callout เมื่อ:

  • ข้อความต้องการการโต้ตอบหรือหลายการกระทำ — ใช้ Modal หรือ Alert Dialog

  • เนื้อหาเป็นจุดสนใจหลักของหน้า — ให้ใช้ Card หรือเค้าโครง Hero แทน

การเข้าถึง ​

  • ตรวจสอบให้แน่ใจว่าได้กำหนดบทบาท alert อย่างถูกต้อง (role="alert" หรือ role="status")
  • ใช้ความแตกต่างของสีเชิงความหมายที่เป็นไปตามมาตรฐาน WCAG AA
  • อย่าอาศัยสีเพียงอย่างเดียวในการสื่อความหมาย

การใช้งาน ​

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

ตัวอย่าง ​

สล็อต ​

สล็อตคำอธิบาย
messageเนื้อหาข้อความแจ้งเตือน

ส่วนประกอบ ​

ส่วนคำอธิบาย
.instui-contentคอนเทนเนอร์สำหรับเนื้อหาข้อความ.
.instui-iconไอคอนเสริมทางด้านซ้ายของเนื้อหา.

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
::before—

สถานะ ​

สถานะคำอธิบาย
:optional—

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--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——

ที่เกี่ยวข้อง ​