Icon button

텍스트 라벨 없이 아이콘만으로 특정 액션을 수행하는 버튼 요소입니다. 공간이 제한적이거나 사용자가 즉시 이해할 수 있는 표준적인 기능을 간결하게 제공할 때 사용합니다.

Design

Web

iOS

Android

WantedIconButton

아이콘을 버튼 요소로 사용하기 위해 확대된 터치 영역을 제공합니다. 활성/비활성 상태, 배경 스타일, 아이콘 색상 등 다양한 시각적 스타일을 지정할 수 있으며, 넓은 터치 영역을 통해 사용자 편의성을 높입니다.

WantedIconButtonBackground(
    icon = R.drawable.ic_icon,
    modifier = Modifier.size(24.dp),
    alternative = true,
    enabled = true,
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`icon`	Int	아이콘으로 사용할 drawable 리소스 ID입니다.
`modifier`	Modifier	버튼 외형 및 배치를 제어하는 Modifier입니다.
`alternative`	Boolean	true일 경우 대체 배경 색상을 적용합니다.
`enabled`	Boolean	버튼의 활성화 여부를 지정합니다. false일 경우 흐리게 표시됩니다.
`tint`	Color	아이콘의 색상입니다. 기본값은 회색 계열이며 alternative에 따라 달라집니다.
`onClick`	() -> Unit	버튼 클릭 시 호출되는 콜백입니다.

Advanced

WantedIconButtonNormal

배경을 제외하고 아이콘만을 표시하는 기본 아이콘 버튼입니다. 필요 시 우측 상단에 PushBadge 컴포넌트을 함께 표시할 수 있으며, 터치 영역은 WantedTouchArea를 통해 보장되어 있습니다.

WantedIconButtonNormal(
    icon = R.drawable.ic_icon,
    modifier = Modifier.size(24.dp),
    pushBadge = {
        WantedPushBadge()
    },
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`icon`	Int	아이콘으로 사용할 drawable 리소스 ID입니다.
`modifier`	Modifier	버튼 외형 및 배치를 제어하는 Modifier입니다.
`enabled`	Boolean	버튼의 활성화 여부입니다. false일 경우 비활성 색상으로 표시됩니다.
`tint`	Color	아이콘의 색상입니다. 기본값은 label_normal입니다.
`pushBadge`	(@Composable () -> Unit)?	우측 상단에 표시될 PushBadge 등 컴포넌트입니다.
`onClick`	() -> Unit	버튼 클릭 시 호출되는 콜백입니다.

WantedIconButtonOutlined

WantedIconButtonSize를 기반으로 하는 Outlined 스타일의 아이콘 버튼입니다. 아이콘의 크기와 패딩을 enum으로 간편하게 설정할 수 있으며, 외곽선과 배경, 텍스트 색상 등을 상태별로 지정할 수 있습니다.

WantedIconButtonOutlined(
    icon = R.drawable.ic_icon,
    size = WantedIconButtonSize.Medium,
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`icon`	Int	버튼에 표시할 drawable 리소스 ID입니다.
`size`	WantedIconButtonSize	버튼의 크기와 내부 여백을 지정하는 enum입니다.
`modifier`	Modifier	외형 및 배치를 제어하는 Modifier입니다.
`enabled`	Boolean	버튼의 활성화 여부입니다.
`outlineColor`	Color	활성화 상태의 외곽선 색상입니다.
`disableOutlineColor`	Color	비활성 상태의 외곽선 색상입니다.
`tint`	Color	활성 상태의 아이콘 색상입니다.
`disableTint`	Color	비활성 상태의 아이콘 색상입니다.
`background`	Color	활성 상태의 배경 색상입니다.
`disableBackground`	Color	비활성 상태의 배경 색상입니다.
`onClick`	() -> Unit	클릭 시 호출되는 콜백입니다.

WantedIconButtonOutlined

패딩을 수동으로 지정할 수 있는 Outlined 아이콘 버튼입니다. 이 함수는 Size 대신 Modifier 크기 및 패딩을 직접 지정하여 더 유연한 스타일링이 가능합니다.

WantedIconButtonOutlined(
    icon = R.drawable.ic_icon,
    modifier = Modifier.size(40.dp),
    padding = 8.dp,
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`icon`	Int	버튼에 표시할 drawable 리소스 ID입니다.
`modifier`	Modifier	외형 및 배치를 제어하는 Modifier입니다.
`padding`	Dp	아이콘 내부 패딩입니다.
`enabled`	Boolean	버튼의 활성화 여부입니다.
`outlineColor`	Color	활성화 상태의 외곽선 색상입니다.
`disableOutlineColor`	Color	비활성 상태의 외곽선 색상입니다.
`tint`	Color	활성 상태의 아이콘 색상입니다.
`disableTint`	Color	비활성 상태의 아이콘 색상입니다.
`background`	Color	활성 상태의 배경 색상입니다.
`disableBackground`	Color	비활성 상태의 배경 색상입니다.
`onClick`	() -> Unit	클릭 시 호출되는 콜백입니다.

WantedIconButtonSolid

WantedIconButtonSize를 사용하여 간편하게 크기와 패딩을 지정할 수 있는 Solid 스타일 아이콘 버튼입니다. 원형 배경과 흰색 아이콘을 기본으로 하며, 배경 및 아이콘 색상은 커스터마이징이 가능합니다.

WantedIconButtonSolid(
    icon = R.drawable.ic_icon,
    size = WantedIconButtonSize.Medium,
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`icon`	Int	아이콘으로 사용할 drawable 리소스 ID입니다.
`size`	WantedIconButtonSize	버튼 크기와 내부 패딩을 정의하는 enum입니다.
`modifier`	Modifier	외형 및 배치를 제어하는 Modifier입니다.
`enabled`	Boolean	버튼의 활성화 여부입니다.
`tint`	Color	아이콘의 색상입니다. 기본값은 흰색입니다.
`background`	Color	배경 색상입니다. 기본값은 primary_normal입니다.
`onClick`	() -> Unit	클릭 시 호출되는 콜백입니다.

WantedIconButtonSolid

크기와 패딩을 직접 지정할 수 있는 Solid 스타일 아이콘 버튼입니다. 배경, 아이콘 색상 및 클릭 이벤트를 자유롭게 설정할 수 있습니다.

WantedIconButtonSolid(
    icon = R.drawable.ic_icon,
    modifier = Modifier.size(40.dp),
    padding = 8.dp,
    onClick = { /* 클릭 처리 */ }
)

Parameters

이름	타입	설명
`icon`	Int	아이콘으로 사용할 drawable 리소스 ID입니다.
`modifier`	Modifier	외형 및 배치를 제어하는 Modifier입니다.
`enabled`	Boolean	버튼의 활성화 여부입니다.
`padding`	Dp	아이콘 내부 패딩입니다.
`tint`	Color	아이콘의 색상입니다. 기본값은 흰색입니다.
`background`	Color	배경 색상입니다. 기본값은 primary_normal입니다.
`onClick`	() -> Unit	클릭 시 호출되는 콜백입니다.

Enum

WantedIconButtonSize

값	설명
`Medium`	표준 사이즈 (40dp)로, 대부분의 UI에 적합합니다.
`Small`	소형 사이즈 (32dp)로, 공간이 제한된 영역에 적합합니다.