לחצנים הם רכיבים בסיסיים שמאפשרים למשתמש להפעיל פעולה. יש חמישה סוגי לחצנים. הטבלה הבאה מתארת את לגבי כל אחד מחמשת סוגי הלחצנים, והמקומות שבהם צריך להשתמש אותם.

סוג	מראה	המטרה
מלא	רקע רציף עם טקסט מנוגד.	לחצנים מודגשים. ההגדרות האלה רלוונטיות לפעולות ראשיות באפליקציה, כמו 'שליחה' ולוחצים על 'שמירה'. אפקט הצללית מדגיש את חשיבות הלחצן.
טונל מלא	צבע הרקע משתנה בהתאם לפני השטח.	גם לפעולות ראשיות או משמעותיות. לחצנים מלאים מספקים פונקציות חזותיות יותר של משקל וחליפה, כמו 'הוספה לעגלת הקניות' ו'כניסה'.
גבוה מהרגיל	המקום מתבלט באמצעות צל.	בעל תפקיד דומה ללחצנים טונליים. מגדילים את הגובה כדי לגרום ללחצן לבלוט עוד יותר.
עם קווי מתאר	כוללת גבול ללא מילוי.	לחצנים עם הדגשה בינונית, שמכילים פעולות חשובות אבל לא ראשיות. הם מתאימים היטב עם לחצנים אחרים כדי לציין פעולות חלופיות ומשניות כמו 'ביטול' או 'חזרה'.
טקסט	הצגת טקסט ללא רקע או שוליים.	לחצנים עם דגש נמוך, אידיאליים לפעולות פחות חשובות כמו קישורי ניווט או פונקציות משניות כמו 'מידע נוסף' או 'הצגת פרטים'.

התמונה הבאה ממחישה את חמשת סוגי הלחצנים ב-Material Design.

פלטפורמת API

• onClick: הפונקציה שנקראה כשהמשתמש לוחץ על הלחצן.
• enabled: כשהערך הוא False, הפרמטר הזה גורם ללחצן להופיע לא זמין ולא פעיל.
• colors: מופע של ButtonColors שקובע את הצבעים שבהם נעשה שימוש הלחצן.
• contentPadding: המרווח הפנימי בתוך הלחצן.

לחצן מלא

רכיב הלחצן שמולאו משתמש בתוכן הקומפוזבילי הבסיסי Button. זה כן מלא בצבע מלא כברירת מחדל. קטע הקוד הבא מדגים איך להטמיע את הרכיב:

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

היישום הזה נראה כך:

לחצן טונלי מלא

רכיב הלחצן הטונלי המלא משתמש בתוכן הקומפוזבילי FilledTonalButton. כברירת מחדל, השדה מאוכלס בצבע טונלי.

קטע הקוד הבא מדגים איך מטמיעים את הרכיב:

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

היישום הזה נראה כך:

לחצן מודגש

רכיב הלחצן המודגש משתמש בתוכן הקומפוזבילי OutlinedButton. הוא מופיעה עם מתאר כברירת מחדל.

קטע הקוד הבא מדגים איך מטמיעים את הרכיב:

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

היישום הזה נראה כך:

לחצן בולט

רכיב הלחצן העליון משתמש בתוכן הקומפוזבילי ElevatedButton. יש בו צל שמייצג את אפקט הגובה כברירת מחדל. שימו לב שבשביל למעשה לחצן קווי עם צל.

קטע הקוד הבא מדגים איך מטמיעים את הרכיב:

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

היישום הזה נראה כך:

לחצן הטקסט

רכיב לחצן הטקסט משתמש בתוכן הקומפוזבילי TextButton. עד ללחיצה על הלחצן, הוא מופיע כטקסט בלבד. כברירת מחדל, אין בה מילוי או קווי מתאר מלאים.

קטע הקוד הבא מדגים איך מטמיעים את הרכיב:

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

היישום הזה נראה כך:

מקורות מידע נוספים

• לחצן פעולה צף
• מסמכי ממשק המשתמש של Material