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

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

ภาพต่อไปนี้แสดงปุ่ม 5 ประเภทในดีไซน์ Material

วันที่

แพลตฟอร์ม API

• onClick: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้กดปุ่ม
• enabled: เมื่อเป็นเท็จ พารามิเตอร์นี้จะทำให้ปุ่มปรากฏขึ้น ไม่พร้อมใช้งานและไม่ได้ใช้งาน
• colors: อินสแตนซ์ของ ButtonColors ที่กำหนดสีที่ใช้ใน ปุ่ม
• contentPadding: ระยะห่างจากขอบของปุ่ม

ปุ่มแบบเติมสี

คอมโพเนนต์ปุ่มเติมสีใช้ Button Composable พื้นฐาน ใช่เลย ด้วยสีทึบโดยค่าเริ่มต้น ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีการ ใช้คอมโพเนนต์ดังนี้

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่

ปุ่มโทนสีทึบ

คอมโพเนนต์ปุ่มโทนสีทึบใช้ Composable FilledTonalButton โดยจะเติมด้วยโทนสีโดยค่าเริ่มต้น

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่

ปุ่มแบบเติมขอบ

คอมโพเนนต์ปุ่มที่มีเส้นขอบใช้ OutlinedButton Composable ทั้งนี้ จะปรากฏขึ้นโดยมีเค้าโครงโดยค่าเริ่มต้น

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่

ปุ่มแบบยกขึ้น

คอมโพเนนต์ปุ่มนูนใช้ ElevatedButton Composable มี เงาที่แสดงเอฟเฟ็กต์ระดับความสูงโดยค่าเริ่มต้น โปรดทราบว่า โดยพื้นฐานแล้วปุ่มที่มีเส้นขอบที่มีเงา

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่

ปุ่มข้อความ

คอมโพเนนต์ปุ่มข้อความใช้ Composable TextButton จนกว่าจะกด ข้อความจะปรากฏเป็นเพียงข้อความเท่านั้น ไม่มีการเติมสีหรือเติมขอบที่ทึบโดยค่าเริ่มต้น

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้งานคอมโพเนนต์

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังนี้

วันที่

แหล่งข้อมูลเพิ่มเติม

• ปุ่มการทำงานแบบลอย
• เอกสาร UI เนื้อหา