Button

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

유형

디자인

목적

채워짐

대비되는 텍스트가 있는 단색 배경

높은 강조 버튼 '제출', '저장'과 같은 애플리케이션의 기본 작업에 사용됩니다. 그림자 효과는 버튼의 중요성을 강조합니다.

채워진 색조

배경 색상은 표면과 일치하도록 다릅니다.

또한 기본 또는 중요한 작업에도 적용됩니다. 채워진 버튼은 시각적 가중치를 더 많이 제공하며 '장바구니에 추가', '로그인'과 같은 기능에 적합합니다.

미열

그림자를 사용하여 눈에 띄게 표시합니다.

색조 버튼과 유사한 역할을 합니다. 버튼이 더 눈에 띄게 보이도록 높이를 늘립니다.

윤곽선 있음

테두리가 있으며 채우기가 없습니다.

중요하지만 기본이 아닌 작업이 포함된 중간 강조 버튼 다른 버튼과 함께 사용하여 '취소' 또는 '뒤로'와 같은 대체 작업이나 보조 작업을 나타내는 데 적합합니다.

텍스트

배경이나 테두리가 없는 텍스트를 표시합니다.

강조도가 낮은 버튼으로, 탐색 링크와 같이 덜 중요한 작업이나 '자세히 알아보기' 또는 '세부정보 보기'와 같은 보조 기능에 적합합니다.

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

고유한 특성이 강조 표시된 5가지 버튼 구성요소의 예
그림 1. 5개의 버튼 구성요소

API 노출 영역

  • onClick: 사용자가 버튼을 누르면 호출되는 함수입니다.
  • enabled: 이 매개변수가 false이면 버튼을 사용할 수 없고 비활성 상태로 표시됩니다.
  • colors: 버튼에 사용되는 색상을 결정하는 ButtonColors의 인스턴스입니다.
  • contentPadding: 버튼 내 패딩입니다.

채워진 버튼

채워진 버튼 구성요소는 기본 Button 컴포저블을 사용합니다. 기본적으로 단색으로 채워집니다. 다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

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

이 구현은 다음과 같이 표시됩니다.

'filled'라고 적힌 보라색 배경의 채워진 버튼
그림 2. 채워진 버튼

채워진 색조 버튼

채워진 색조 버튼 구성요소는 FilledTonalButton 컴포저블을 사용합니다. 기본적으로 색조 색상으로 채워집니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

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

이 구현은 다음과 같이 표시됩니다.

연한 보라색 배경에 'filled'라고 적힌 색조 버튼
그림 3. 색조 버튼

윤곽선 있는 버튼

윤곽선이 그어진 버튼 구성요소는 OutlinedButton 컴포저블을 사용합니다. 기본적으로 윤곽선과 함께 표시됩니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

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

이 구현은 다음과 같이 표시됩니다.

'윤곽선'이라고 적힌 어두운 테두리가 있는 투명한 윤곽선 버튼
그림 4. 윤곽선이 있는 버튼

돌출 버튼

상단 버튼 구성요소는 ElevatedButton 컴포저블을 사용합니다. 기본적으로 엘리베이션 효과를 나타내는 그림자가 있습니다. 기본적으로 그림자가 있는 윤곽선이 지정된 버튼입니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

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

이 구현은 다음과 같이 표시됩니다.

회색 배경에 'Elevated'라고 적힌 버튼이 있습니다.
그림 5. 돌출된 버튼

텍스트 버튼

텍스트 버튼 구성요소는 TextButton 컴포저블을 사용합니다. 누르기 전에는 텍스트로만 표시됩니다. 기본적으로 솔리드 채우기나 윤곽선이 없습니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

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

이 구현은 다음과 같이 표시됩니다.

'텍스트 버튼'이라고 표시된 텍스트 버튼
그림 6. 텍스트 버튼

추가 리소스