ปุ่ม

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

ก. เนื้อหา

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

ข. คอนเทนเนอร์

คอนเทนเนอร์ปุ่มจํากัดไว้ที่การเติมสีพื้นสีเดียว

ปุ่มเปิด/ปิด

ปุ่มเปิด/ปิดช่วยให้ผู้ใช้สลับระหว่าง 2 สถานะได้

ปุ่มแบบกะทัดรัด

ปุ่มแบบกะทัดรัดจะปรากฏเล็กกว่า แต่มีพื้นที่ที่แตะได้ใหญ่กว่า พื้นที่ที่แตะได้เริ่มต้นคือ 48x48 dp

ใช้การเติมสีที่แตกต่างกันเพื่อระบุลําดับชั้นของปุ่ม

เน้นสูง

ปุ่มเน้นสูงมีการดำเนินการหลักของแอป สำหรับปุ่มเน้นสูง ให้ใช้สีหลักหรือสีรองสำหรับคอนเทนเนอร์ และใช้สีในโหมดหลักและโหมดรองสำหรับเนื้อหา ดูข้อมูลเพิ่มเติมได้ที่ธีม Material ของ Wear

การเน้นปานกลาง

ปุ่มเน้นระดับกลางจะโดดเด่นด้วยสีที่เติมซึ่งคอนทราสต์น้อยกว่า เหตุการณ์เหล่านี้มีการกระทําที่มีความสําคัญน้อยกว่าการกระทําหลัก ใช้สีพื้นผิวสำหรับคอนเทนเนอร์และสีบนพื้นผิวสำหรับเนื้อหา

หรือจะใช้คอมโพเนนต์ OutlinedButton ที่กําหนดเองสําหรับปุ่มเน้นระดับกลางก็ได้ รูปภาพนี้มีพื้นหลังโปร่งใส เส้นสีของตัวแปรหลักที่มีความทึบแสง 60% และเนื้อหาสีหลัก

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

ใหญ่

ไอคอน (30 x 30 dp)
คอนเทนเนอร์ (60 x 60 dp)

ค่าเริ่มต้น

ไอคอน (26 x 26 dp)
คอนเทนเนอร์ (52 x 52 dp)

เล็ก

ไอคอน (24 x 24 dp)
คอนเทนเนอร์ (48 x 48 dp)

เล็กพิเศษ

ไอคอน (24 x 24 dp)
คอนเทนเนอร์ (32 x 32 dp)

ขอแนะนําให้เพิ่มระยะห่างจากขอบรอบปุ่มนี้เพื่อสร้างเป้าหมายการแตะที่มีขนาดอย่างน้อย 48 dp นี่คือขนาดเป้าหมายการแตะขั้นต่ำสำหรับการช่วยเหลือพิเศษ

ปุ่ม 1 ปุ่ม

ระยะห่างจากขอบภายในจะยังคงเหมือนเดิม และระยะขอบควรเป็นเปอร์เซ็นต์เพื่อไม่ให้ปุ่มยืดออกมากเกินไปและคงขนาดแบบสัมพัทธ์ไว้

ปุ่ม 2 ปุ่ม

เมื่อมีปุ่ม 2 ปุ่ม ระบบจะเพิ่มระยะขอบภายในเป็นเปอร์เซ็นต์เพื่อไม่ให้ปุ่มยืดออกมากเกินไปและคงขนาดแบบสัมพัทธ์ไว้