Button

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

다음 이미지는 Material Design의 5가지 버튼 유형을 보여줍니다.

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 UI 문서