States & Feedback

Loading

Skeleton Screen

Skeleton screen เป็นตัวเลือกแรกเสมอสำหรับเนื้อหาที่รู้โครงล่วงหน้า (card, list, table) — ใช้สีเทา #EBECF0 (grey shade 0) พร้อม shimmer animation เบาๆ:

Skeleton Screen จริง · shimmer animation 1.4s

shimmer ใช้ linear-gradient 3 สีเทา (#EBECF0 → #D9DAE4 → #EBECF0) วิ่งจากขวาไปซ้ายรอบละ 1.4s

.skeleton {
  background: linear-gradient(90deg, #EBECF0 25%, #D9DAE4 37%, #EBECF0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #EBECF0; }
}

Spinner

Spinner ใช้เมื่อไม่รู้โครงเนื้อหาล่วงหน้า หรือ action สั้นๆ เช่นกดปุ่ม submit — สีเส้น spinner ใช้ #FF6727:

Spinner จริง · หมุน 0.7s linear · 3 ขนาด

Small 18pxDefault 32pxLarge 48px

Spinner บนพื้นดำและในปุ่ม

บนพื้นดำ

ในปุ่ม disabled

• Animation ต้อง respect prefers-reduced-motion เสมอ (ดู Animation Guidelines)

Toast Notifications

Toast จริง · 4 สถานะ enter animation 300ms

✓

บันทึกข้อมูลสำเร็จ

รายงานประจำเดือนถูกบันทึกเรียบร้อยแล้ว

⚠

ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์

กรุณาลองใหม่อีกครั้ง หรือติดต่อ IT support

⚡

ข้อมูลอาจไม่เป็นปัจจุบัน

อัปเดตล่าสุดเมื่อ 2 ชั่วโมงที่แล้ว

ℹ

การอบรมประจำปี

กำหนดส่งภายในวันที่ 30 กันยายนนี้

Toast หายเองใน 3–5 วินาที · สีพื้นตามจานสีแบรนด์ · enter animation ใช้ cubic-bezier(0, 0, 0.2, 1)

Empty State

Empty State จริง · พร้อม CTA

📋

ยังไม่มีโครงการในพอร์ตนี้

เริ่มเพิ่มโครงการแรกเพื่อติดตามกำลังผลิตและประสิทธิภาพได้ทันที

โทนเป็นบวก ไม่ใช้คำที่ทำให้ผู้ใช้รู้สึกผิด · มี action ให้ทำต่อเสมอ

• ใช้ illustration แบบ flat style ของแบรนด์ (โทนสีตาม Color Palette เท่านั้น — ห้ามใช้ stock illustration สีนอกจานสี)
• ข้อความสั้น บอกว่า "ทำไมถึงว่าง" + มี action ให้ผู้ใช้ทำต่อ (ไม่ใช่จบแค่ "ไม่มีข้อมูล")
• โทนเป็นบวก ไม่ใช้คำที่ทำให้ผู้ใช้รู้สึกผิด

Error States

Error ทุกระดับ · Inline / Toast / Full-page

⚠กรุณากรอกอีเมลให้ถูกต้อง — ตัวอย่าง: name@bgrimmpower.com

⚠

ไม่สามารถบันทึกข้อมูลได้

เซิร์ฟเวอร์ไม่ตอบสนอง —

⚠

เกิดข้อผิดพลาดในการโหลดข้อมูล

ระบบไม่สามารถดึงข้อมูล dashboard ได้ในขณะนี้ กรุณาลองใหม่อีกครั้ง

ระดับ	ใช้เมื่อ	โทน
Inline (field-level)	ผู้ใช้กรอกผิด	สุภาพ บอกวิธีแก้ตรงจุด — ดู Forms & Inputs
Toast/Banner	Action ล้มเหลวจากระบบ (เช่น เชื่อมต่อ API ไม่ได้)	บอกสิ่งที่เกิดขึ้นตรงๆ ไม่ใช้ error code ดิบให้ผู้ใช้ทั่วไปเห็น + เสนอ retry
Full-page	ระบบล่มทั้งหน้า	มี illustration + ปุ่ม action เดียว (retry หรือกลับหน้าแรก)

ห้ามใช้สีแดงมาตรฐาน (#FF0000 หรือใกล้เคียง) — ใช้ #C43400 (Dark Orange) เป็นสี error หลักของทั้งระบบ เพื่อคงความสม่ำเสมอของจานสีแบรนด์

Success / Confirmation

• Toast แบบสั้น หายไปเองใน 3–5 วินาที ไม่บังคับให้ผู้ใช้กดปิด
• ใช้ไอคอน check ธรรมดา สีเขียว accent (#3BCEBD หรือ #009C8D) ได้เฉพาะจุดนี้ — เป็นหนึ่งในไม่กี่กรณีที่ใช้สี accent เขียวเป็นสื่อความหมาย (สถานะสำเร็จ) แทนการตกแต่ง
• Confirmation ของ action ที่ทำลายข้อมูล (ลบ, ยกเลิก) ต้องเป็น modal ที่ต้องกดยืนยันเสมอ ไม่ใช้ toast ที่หายเองได้