Jetpack Compose Academy · Pelajaran

Button Text, Outlined & Icon

Pilih varian button yang tepat untuk kebutuhan Anda.

Button Text, Outlined & Icon adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Buttons Have Personalities

Not every action deserves a bold filled button. Compose offers several button variants, each signaling a different level of emphasis. 🎨

The Filled Button

The standard Button is filled and high-emphasis. It draws the eye, so save it for the one primary action per screen.

Button(onClick = { pay() }) {
    Text("Pay now")
}

OutlinedButton for Secondary

An OutlinedButton has just a border and no fill. It reads as a clear-but-secondary choice sitting next to a filled one.

OutlinedButton(onClick = { cancel() }) {
    Text("Cancel")
}

TextButton for Low Emphasis

A TextButton shows only a label, no border or fill. It is perfect for quiet actions like Learn more or dialog choices.

TextButton(onClick = { dismiss() }) {
    Text("Not now")
}

Emphasis Is a Hierarchy

Think of it as a ladder of emphasis: filled is loudest, outlined is medium, text is quietest. Match the variant to the action's weight.

Icons Inside Buttons

Any button can hold an Icon plus a label in its content row. Add a small spacer so the icon and text do not touch.

Button(onClick = { add() }) {
    Icon(Icons.Default.Add, null)
    Spacer(Modifier.width(8.dp))
    Text("Add")
}

The IconButton

An IconButton is a compact, label-free tap target holding just one icon. It is ideal for toolbars and app-bar actions.

IconButton(onClick = { share() }) {
    Icon(Icons.Default.Share, "Share")
}

Always Describe Your Icon

Give an icon-only button a contentDescription so screen readers can announce it. A null description hides it from accessibility.

IconButton(onClick = { favorite() }) {
    Icon(Icons.Default.Favorite, "Favorite")
}

FilledIconButton for Emphasis

Need an icon button that stands out? FilledIconButton adds a solid background, raising its emphasis above the plain version.

FilledIconButton(onClick = { record() }) {
    Icon(Icons.Default.Mic, "Record")
}

Pick the Right Variant

Choosing well guides users: filled for Confirm, outlined for an alternative, text for dismiss, IconButton for tight spaces.

Same onClick, Different Look

Every variant shares the same onClick contract. You change only the visual weight, never how you wire up the action.

Quick Check

You want a quiet, low-emphasis action with only a label and no border or fill.

Recap: Right Tool, Right Tap

You now have a toolbox: filled Button, OutlinedButton, TextButton, and IconButton. Match emphasis to the action and label your icons. ✨

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Button Text, Outlined & Icon” gratis?

Ya — teks lengkap “Button Text, Outlined & Icon” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Button Text, Outlined & Icon”?

Pilih varian button yang tepat untuk kebutuhan Anda. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Button Text, Outlined & Icon” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy