버튼은 사용자가 정의된 작업을 트리거할 수 있는 기본 구성요소입니다. 버튼에는 5가지 유형이 있습니다. 다음 표에서는 5가지 버튼 유형의 각 모양과 각 유형을 사용해야 하는 위치를 설명합니다.
유형 |
디자인 |
목적 |
---|---|---|
채워짐 |
대조되는 텍스트가 있는 단색 배경 |
높은 강조 버튼 '제출' 및 '저장'과 같이 애플리케이션의 기본 작업을 위한 것입니다. 그림자 효과는 버튼의 중요성을 강조합니다. |
채워진 색조 |
배경 색상은 표면에 따라 달라집니다. |
기본 작업이나 중요한 작업에도 사용할 수 있습니다. 채워진 버튼은 '장바구니에 추가', '로그인'과 같은 기능에 시각적 무게감을 더합니다. |
미열 |
그림자로 돋보이게 만들기 |
색조 버튼과 비슷한 역할을 합니다. 버튼이 더 눈에 띄게 표시되도록 고도를 높입니다. |
윤곽선 있음 |
채우기가 없는 테두리가 특징입니다. |
중간 중요도 버튼, 중요하지만 기본은 아닌 작업이 포함됩니다. 이 버튼은 다른 버튼과 잘 어우러져 '취소' 또는 '뒤로'와 같은 대체 작업이나 보조 작업을 표시합니다. |
텍스트 |
배경이나 테두리 없이 텍스트를 표시합니다. |
낮은 강조 버튼. 탐색 링크와 같이 덜 중요한 작업이나 '자세히 알아보기' 또는 '세부정보 보기'와 같은 보조 기능에 적합합니다. |
다음 이미지는 Material Design의 다섯 가지 버튼 유형을 보여줍니다.
API 노출 영역
onClick
: 사용자가 버튼을 누를 때 호출되는 함수입니다.enabled
: false인 경우 이 매개변수로 인해 버튼이 사용할 수 없고 비활성으로 표시됩니다.colors
: 버튼에 사용되는 색상을 결정하는ButtonColors
의 인스턴스입니다.contentPadding
: 버튼 내의 패딩입니다.
채워진 버튼
채워진 버튼 구성요소는 기본 Button
컴포저블을 사용합니다. 기본적으로 단색으로 채워집니다. 다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
이 구현은 다음과 같이 표시됩니다.
채워진 색조 버튼
채워진 색조 버튼 구성요소는 FilledTonalButton
컴포저블을 사용합니다.
기본적으로 색조 색상으로 채워집니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
이 구현은 다음과 같이 표시됩니다.
윤곽선이 있는 버튼
윤곽선이 표시된 버튼 구성요소는 OutlinedButton
컴포저블을 사용합니다. 기본적으로 윤곽선과 함께 표시됩니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
이 구현은 다음과 같이 표시됩니다.
돌출 버튼
승격된 버튼 구성요소는 ElevatedButton
컴포저블을 사용합니다. 기본적으로 고도 효과를 나타내는 그림자가 있습니다. 이 버튼은 기본적으로 그림자가 있는 윤곽선 버튼입니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
이 구현은 다음과 같이 표시됩니다.
텍스트 버튼
텍스트 버튼 구성요소는 TextButton
컴포저블을 사용합니다. 누를 때까지는 텍스트로만 표시됩니다. 기본적으로 단색 채우기 또는 윤곽선이 없습니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
이 구현은 다음과 같이 표시됩니다.