0Pricing
Jetpack Compose Academy · Урок

Текстовые, контурные кнопки и кнопки с иконками

Выбирайте подходящий вариант кнопки для каждой задачи.

«Текстовые, контурные кнопки и кнопки с иконками» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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. ✨

Часто задаваемые вопросы

Урок «Текстовые, контурные кнопки и кнопки с иконками» бесплатный?

Да — полный текст урока «Текстовые, контурные кнопки и кнопки с иконками» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Текстовые, контурные кнопки и кнопки с иконками»?

Выбирайте подходящий вариант кнопки для каждой задачи. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Текстовые, контурные кнопки и кнопки с иконками»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Button и onClick
  2. Текстовые, контурные кнопки и кнопки с иконками
  3. Состояния доступности, отключения и загрузки
  4. clickable для любого Composable
← Назад к Jetpack Compose Academy