Кнопки — это фундаментальные компоненты, которые позволяют пользователю запускать определенное действие. Существует пять типов кнопок. В следующей таблице описан внешний вид каждого из пяти типов кнопок, а также места их использования.

Тип	Появление	Цель
Заполненный	Сплошной фон с контрастным текстом.	Кнопки с высоким акцентом. Они предназначены для основных действий в приложении, таких как «отправить» и «сохранить». Эффект тени подчеркивает важность кнопки.
Наполненный тональный	Цвет фона варьируется в зависимости от поверхности.	Также для первичных или значимых действий. Заполненные кнопки придают больше визуального веса и подходят для таких функций, как «Добавить в корзину» и «Войти».
Повышенный	Выделяется наличием тени.	Выполняет аналогичную роль тональным кнопкам. Увеличьте высоту, чтобы кнопка стала еще заметнее.
Изложил	Имеет рамку без заливки.	Кнопки со средним акцентом, содержащие важные, но не первоочередные действия. Они хорошо сочетаются с другими кнопками для обозначения альтернативных второстепенных действий, таких как «Отмена» или «Назад».
Текст	Отображает текст без фона и рамки.	Кнопки с низким акцентом идеально подходят для менее важных действий, таких как навигационные ссылки или второстепенные функции, такие как «Подробнее» или «Просмотреть подробности».

На следующем изображении показаны пять типов кнопок в 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

Эта реализация выглядит следующим образом:

Дополнительные ресурсы

• Плавающая кнопка действия
• Документация по пользовательскому интерфейсу материалов