🔘 ปุ่ม Button ไม่ได้มีแค่ "กดเพื่อส่งข้อมูล"! รู้จัก 20 ประเภท Button ที่นิยมใช้ใน Web App

Button เป็นองค์ประกอบที่ผู้ใช้โต้ตอบกับระบบมากที่สุด การเลือกใช้ Button ให้ถูกประเภท ไม่เพียงทำให้หน้าตาดูสวย แต่ยังช่วยให้ผู้ใช้เข้าใจว่าควรกดอะไร เมื่อไร และลดโอกาสเกิดความผิดพลาดในการใช้งาน

💡 ผู้ใช้จะได้อะไร?

- ✅ เลือก Button ให้เหมาะกับแต่ละหน้าจอ

- ✅ ออกแบบ UX ที่ใช้งานง่ายขึ้น

- ✅ จัดลำดับความสำคัญของ Action ได้ชัดเจน

- ✅ สร้าง UI ที่ดูเป็นมืออาชีพ

🔘 20 ประเภท Button ที่นิยมใช้

1️⃣ Primary Button

ปุ่มหลักสำหรับ Action ที่สำคัญที่สุด เช่น Save, Submit, Checkout

2️⃣ Secondary Button

ปุ่มรอง ใช้คู่กับ Primary เช่น Cancel หรือ Back

3️⃣ Tertiary Button

ปุ่มลำดับที่สาม มักเป็น Text Button สำหรับ Action รอง

4️⃣ Filled Button

พื้นหลังทึบ มองเห็นเด่น เหมาะกับ Action สำคัญ

5️⃣ Outlined Button

มีเฉพาะเส้นขอบ น้ำหนักรองจาก Filled Button

6️⃣ Text Button

ไม่มีพื้นหลัง เหมาะกับลิงก์หรือคำสั่งที่ไม่ต้องการเน้น

7️⃣ Icon Button

แสดงเฉพาะไอคอน เช่น 🔍 ค้นหา, ❤️ ถูกใจ, ⚙️ ตั้งค่า

8️⃣ Icon + Text Button

รวมไอคอนและข้อความ ช่วยให้เข้าใจได้รวดเร็ว

9️⃣ Floating Action Button (FAB)

ปุ่มลอยเหนือหน้าจอ สำหรับ Action หลัก เช่น ➕ เพิ่มข้อมูล

🔟 Extended FAB

FAB ที่มีทั้งไอคอนและข้อความ เพื่อสื่อความหมายชัดเจนขึ้น

1️⃣1️⃣ Toggle Button

กดเพื่อเปิด–ปิดสถานะ เช่น Dark Mode หรือ Notifications

1️⃣2️⃣ Chip Button

ปุ่มขนาดเล็กสำหรับเลือก Filter หรือ Tag

1️⃣3️⃣ Segmented Button

เลือกได้ทีละตัวเลือก เช่น รายวัน | รายสัปดาห์ | รายเดือน

1️⃣4️⃣ Split Button

ปุ่มหลักพร้อม Dropdown สำหรับคำสั่งเพิ่มเติม

1️⃣5️⃣ Dropdown Button

กดเพื่อเปิดรายการเมนูหรือตัวเลือก

1️⃣6️⃣ Menu Button

เปิด Navigation เช่น ☰ Hamburger Menu หรือ Sidebar

1️⃣7️⃣ Loading Button

แสดงสถานะกำลังประมวลผล เพื่อป้องกันการกดซ้ำ

1️⃣8️⃣ Disabled Button

ปุ่มที่ยังไม่สามารถกดได้จนกว่าจะครบเงื่อนไข

1️⃣9️⃣ Social Button

เชื่อมต่อ Social Login เช่น Google, Apple, Facebook หรือ GitHub

2️⃣0️⃣ Danger Button

ใช้กับคำสั่งที่มีความเสี่ยง เช่น Delete, Remove, Reset

🎯 UX/UI Best Practice

- ใช้ Primary Button เพียง 1 ปุ่มเด่นต่อหน้าจอ เพื่อไม่แย่งความสนใจ

- ใช้ข้อความที่สื่อถึงการกระทำ เช่น Save Changes แทนคำว่า OK

- แยกสีของ Danger Button ให้ชัดเจนจากปุ่มทั่วไป

- แสดงสถานะ Hover, Focus, Active, Disabled และ Loading เพื่อให้ผู้ใช้เข้าใจการตอบสนองของระบบ

- ออกแบบขนาดปุ่มให้เหมาะกับการสัมผัส โดยเฉพาะบน Mobile

- รักษารูปแบบปุ่มให้สม่ำเสมอทั้งระบบ เพื่อสร้างประสบการณ์ใช้งานที่คุ้นเคย

💬 คุณใช้ Button ประเภทไหนบ่อยที่สุดในโปรเจกต์ของคุณ? มีประเภทไหนที่อยากลองนำไปใช้บ้าง? มาแชร์กันได้เลย!

#CreatifyX #UXUI #UIButton #WebDesign #MobileApp

📌 ติดตาม CreatifyX

รวมเครื่องมือ AI • Digital • Graphic Design • Productivity ที่ใช้งานได้จริง อัปเดตทุกสัปดาห์ 🚀