버튼

keywords: AiAssisted, product:JetpackCompose

버튼은 사용자가 정의된 작업을 트리거할 수 있는 기본 구성요소입니다. 버튼에는 5가지 유형이 있습니다. 다음 표에서는 5가지 버튼 유형의 모양과 사용해야 하는 위치를 설명합니다.

이 이미지는 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 Design 3 버튼 개요