버튼을 사용하면 사용자가 정의된 작업을 트리거할 수 있습니다. 버튼에는 5가지 유형이 있습니다.
유형 |
디자인 |
목적 |
---|---|---|
채워짐 | 대비되는 텍스트가 있는 단색 배경 |
'제출', '저장'과 같은 기본 작업 그림자 효과는 버튼의 중요성을 강조합니다. |
Tonal | 배경 색상은 표면과 일치하도록 다릅니다. |
기본 또는 중요한 작업 채워진 버튼은 시각적 무게를 제공하며 '장바구니에 추가', '로그인'과 같은 작업에 적합합니다. |
과열 | 그림자를 사용하면 눈에 띄게 할 수 있습니다. |
기본 또는 중요한 작업 버튼을 더 눈에 띄게 하려면 높이를 높입니다. |
윤곽선 있음 | 테두리가 있으며 채우기가 없습니다. |
중요하지만 기본이 아닌 작업에 사용합니다. 윤곽선이 있는 버튼은 다른 버튼과 함께 사용하여 '취소' 또는 '뒤로'와 같은 대체 작업이나 보조 작업을 나타내는 데 적합합니다. |
텍스트 | 배경이나 테두리가 없는 텍스트 |
탐색 링크와 같이 중요하지 않은 작업 또는 '자세히 알아보기' 또는 '세부정보 보기'와 같은 보조 작업 |
버전 호환성
이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.
종속 항목
채워진 버튼 만들기
채워진 버튼 구성요소는 기본 Button
컴포저블을 사용합니다. 기본적으로 단색으로 채워집니다.
결과
!['filled'라고 적힌 보라색 배경의 채워진 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?hl=ko)
채워진 색조 버튼 만들기
채워진 색조 버튼 구성요소는 FilledTonalButton
컴포저블을 사용합니다.
기본적으로 색조 색상으로 채워집니다.
결과
![연한 보라색 배경에 'filled'라고 적힌 색조 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?hl=ko)
윤곽선이 있는 버튼 만들기
윤곽선이 있는 버튼 구성요소는 OutlinedButton
컴포저블을 사용합니다. 기본적으로 윤곽선과 함께 표시됩니다.
결과
!['윤곽선'이라고 적힌 어두운 테두리가 있는 투명한 윤곽선 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?hl=ko)
상단 버튼 만들기
상단 버튼 구성요소는 ElevatedButton
컴포저블을 사용합니다. 기본적으로 고도 효과를 나타내는 그림자가 있으며 그림자가 있는 윤곽선이 그어진 버튼으로 표시됩니다.
결과
![회색 배경에 'Elevated'라고 적힌 버튼이 있습니다.](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?hl=ko)
텍스트 버튼 만들기
텍스트 버튼 구성요소는 TextButton
컴포저블을 사용합니다. 클릭할 때까지는 텍스트로만 표시됩니다. 기본적으로 솔리드 채우기나 윤곽선이 없습니다.
결과
!['텍스트 버튼'이라고 표시된 텍스트 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?hl=ko)
핵심사항
onClick
: 사용자가 버튼을 누르면 호출되는 함수입니다.enabled
: 이 매개변수가 false이면 버튼이 사용할 수 없고 비활성 상태로 표시됩니다.colors
: 버튼에 사용되는 색상을 결정하는ButtonColors
의 인스턴스입니다.contentPadding
: 버튼 내 패딩입니다.
이 가이드가 포함된 컬렉션
이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=ko)