บทที่ 4: Buttons และ Actions
เรียนรู้การใช้งาน Button ทุกประเภทใน MUI สำหรับมือใหม่! 🔘
💡 ทำไม Button ถึงสำคัญ?
• 🎯 User Interaction: จุดเชื่อมต่อหลักระหว่างผู้ใช้และแอป
• 🎨 Visual Hierarchy: ช่วยชี้นำผู้ใช้ให้รู้ว่าควรทำอะไร
• ⚡ Action Feedback: ให้ feedback ชัดเจนเมื่อมีการกระทำ
• 📱 Accessibility: รองรับ keyboard navigation และ screen reader
🎯 เมื่อเรียนจบบทนี้ คุณจะสามารถ:
- เลือก Button Variant ได้ถูก
contained, outlined, text สำหรับสถานการณ์ต่างๆ
- ใช้ IconButton และ FAB
ปุ่มไอคอนและ Floating Action Button
- จัดกลุ่ม ButtonGroup
การจัดกลุ่มปุ่มอย่างเป็นระบบ
- Loading & Disabled States
จัดการสถานะของปุ่มอย่างมืออาชีพ
- Custom Button Styling
ปรับแต่งปุ่มให้ตรงตาม design
- UX Best Practices
หลักการใช้ปุ่มที่ดีสำหรับผู้ใช้
🔘 Button Variants
MUI มี Button 3 แบบหลัก แต่ละแบบมีหน้าที่และการใช้งานที่แตกต่างกัน
🎯 3 Variants หลัก
contained
ปุ่มหลักที่สำคัญที่สุด มีพื้นหลังเต็ม
📌 เมื่อไหร่ใช้:
Call-to-Action หลัก, Submit form, การกระทำสำคัญ
💡 ตัวอย่าง:
ลงทะเบียน, ซื้อสินค้า, บันทึก
outlined
ปุ่มรองที่มีกรอบ ไม่มีพื้นหลัง
📌 เมื่อไหร่ใช้:
การกระทำรอง, Cancel, Alternative action
💡 ตัวอย่าง:
ยกเลิก, แก้ไข, ดูรายละเอียด
text
ปุ่มแบบข้อความ ไม่มีกรอบ มี hierarchy ต่ำสุด
📌 เมื่อไหร่ใช้:
Navigation, Links, การกระทำที่ไม่สำคัญ
💡 ตัวอย่าง:
เรียนรู้เพิ่มเติม, ข้าม, ปิด
📏 Button Sizes
🔍 เปรียบเทียบขนาด
small
เล็ก - สำหรับพื้นที่จำกัด
padding: 8px | font: 0.8125remmedium
กลาง - ขนาดมาตรฐาน
padding: 16px | font: 0.875remlarge
ใหญ่ - สำหรับ CTA สำคัญ
padding: 22px | font: 0.9375rem🌈 Colors และ Props
🎨 ตัวอย่างการใช้งาน
💻 โค้ดตัวอย่าง:
// Basic Button
<Button variant="contained">Click Me</Button>
// With Color
<Button variant="contained" color="primary">Primary</Button>
<Button variant="outlined" color="secondary">Secondary</Button>
<Button variant="text" color="error">Delete</Button>
// With Size
<Button variant="contained" size="large">Large Button</Button>
// With Icons
<Button variant="contained" startIcon={<Save />}>บันทึก</Button>
<Button variant="outlined" endIcon={<Send />}>ส่ง</Button>
// Full Width
<Button variant="contained" fullWidth>Full Width</Button>
// Disabled
<Button variant="contained" disabled>Disabled</Button>