버튼

버튼은 사용자가 정의된 작업을 트리거할 수 있도록 하는 기본 구성요소입니다. 버튼에는 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 문서