버튼은 사용자가 정의된 버튼을 트리거하도록 하는 기본 구성요소입니다. 있습니다. 버튼에는 5가지 유형이 있습니다. 다음 표에서는 각 5가지 버튼 유형의 모양과 있습니다.

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

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

API 노출 영역

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

채워진 버튼

채워진 버튼 구성요소는 기본 Button 컴포저블을 사용합니다. 그것은 기본적으로 단색으로 채워집니다. 다음 스니펫은 구성요소를 구현해야 합니다.

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

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

<ph type="x-smartling-placeholder">

</ph>

채워진 색조 버튼

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

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

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

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

<ph type="x-smartling-placeholder">

</ph>

윤곽선이 있는 버튼

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

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

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

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

<ph type="x-smartling-placeholder">

</ph>

돌출 버튼

승격된 버튼 구성요소는 ElevatedButton 컴포저블을 사용합니다. 여기에는 다음이 있습니다. 기본적으로 고도 효과를 나타내는 그림자. 참고: 기본적으로 그림자가 있는 윤곽선이 있는 버튼입니다.

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

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

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

<ph type="x-smartling-placeholder">

</ph>

텍스트 버튼

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

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

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

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

<ph type="x-smartling-placeholder">

</ph>

추가 리소스

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