버튼

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

유형	디자인	목적
채워짐	대조되는 텍스트가 있는 단색 배경	높은 강조 버튼 '제출' 및 '저장'과 같이 애플리케이션의 기본 작업을 위한 것입니다. 그림자 효과는 버튼의 중요성을 강조합니다.
채워진 색조	배경 색상은 표면에 따라 달라집니다.	기본 작업이나 중요한 작업에도 사용할 수 있습니다. 채워진 버튼은 '장바구니에 추가', '로그인'과 같은 기능에 시각적 무게감을 더합니다.
미열	그림자로 돋보이게 만들기	색조 버튼과 비슷한 역할을 합니다. 버튼이 더 눈에 띄게 표시되도록 고도를 높입니다.
윤곽선 있음	채우기가 없는 테두리가 특징입니다.	중간 중요도 버튼, 중요하지만 기본은 아닌 작업이 포함됩니다. 이 버튼은 다른 버튼과 잘 어우러져 '취소' 또는 '뒤로'와 같은 대체 작업이나 보조 작업을 표시합니다.
텍스트	배경이나 테두리 없이 텍스트를 표시합니다.	낮은 강조 버튼. 탐색 링크와 같이 덜 중요한 작업이나 '자세히 알아보기' 또는 '세부정보 보기'와 같은 보조 기능에 적합합니다.

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

그림 1. 다섯 가지 버튼 구성요소

API 노출 영역

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

채워진 버튼

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

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

참고: 맞춤 버튼을 빌드하려면 Button 컴포저블을 사용하세요.

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

그림 2. 채워진 버튼

채워진 색조 버튼

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

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

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

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

그림 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

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

그림 5. 돌출 버튼

텍스트 버튼

텍스트 버튼 구성요소는 TextButton 컴포저블을 사용합니다. 누를 때까지는 텍스트로만 표시됩니다. 기본적으로 단색 채우기 또는 윤곽선이 없습니다.

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

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

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

그림 6. 텍스트 버튼

추가 리소스

• 플로팅 작업 버튼
• Material UI 문서