Кнопка

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

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

На этом изображении показаны пять типов кнопок в Material Design:

Пример каждого из пяти компонентов кнопки с выделенными уникальными характеристиками.
Рисунок 1. Пять компонентов кнопок.

API surface

onClick
Функция, которую система вызывает, когда пользователь нажимает кнопку.
enabled
Если задано значение false, кнопка будет выглядеть недоступной и неактивной.
colors
Экземпляр ButtonColors, который определяет цвета кнопки.
contentPadding
Поля внутри кнопки.

Заполненная кнопка

В компоненте заполненной кнопки используется базовая composable-функция Button. По умолчанию он имеет сплошную заливку. В этом фрагменте показано, как реализовать компонент и предварительно просмотреть его в интерактивном режиме:

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

Тональная кнопка с заливкой

Компонент заполненной тональной кнопки использует составной элемент FilledTonalButton. По умолчанию он заполнен цветом в тон.

В этом фрагменте показано, как реализовать компонент и посмотреть его в интерактивном режиме:

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

Контурная кнопка

Компонент контурной кнопки использует composable-функцию OutlinedButton. По умолчанию он отображается с контуром.

В этом фрагменте показано, как реализовать компонент и посмотреть его в интерактивном режиме:

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

Приподнятая кнопка

Компонент приподнятой кнопки использует composable-функцию ElevatedButton. По умолчанию у него есть тень, которая создает эффект приподнятости. Это заполненная кнопка, которая включает в себя тень.

В этом фрагменте показано, как реализовать компонент и посмотреть его в интерактивном режиме:

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

Кнопка текста

Компонент текстовой кнопки использует composable-функцию TextButton. Пока вы не нажмете на нее, она будет выглядеть как обычный текст. По умолчанию у него нет сплошной заливки или контура.

В этом фрагменте показано, как реализовать компонент и посмотреть его в интерактивном режиме.

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

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