naverloginkmp-compose/dev.yjyoon.naverloginkmp.compose/NaverLoginButton

NaverLoginButton

@Composable

fun NaverLoginButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: String? = NaverLoginButtonText.current(), style: NaverLoginButtonStyle = NaverLoginButtonStyle.Green, height: Dp = NaverLoginButtonDefaults.Height, shape: Shape = NaverLoginButtonDefaults.shape(iconOnly = text == null), textStyle: TextStyle = NaverLoginButtonDefaults.textStyle(height), naverIcon: Painter = NaverLoginButtonDefaults.naverIcon(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

A "네이버 로그인" button that follows NAVER's button guidelines.

NaverLoginButton(onClick = { scope.launch { handle(NaverLogin.login()) } })

That is the whole thing: NAVER's own N mark, NAVER's own wording for the reader's language, and the colours, corner radius, mark size and spacing measured off NAVER's button artwork.

The guidelines are not advice — an unspecified background colour, an unspecified label colour or a modified mark are the violations NAVER names, so this button does not let you change the palette, and it draws the mark from a single unmodified image that it tints rather than from two drawings of it.

Styles

style picks between NAVER's green button and its neutral one. Each has a light and a dark form, and the ambient theme decides which — isSystemInDarkTheme(), so a button in a dark app turns #05AC4F or #1F1F1F on its own. See NaverLoginButtonColors for all four palettes.

Sizing

Scale with height. The mark, the leading inset, the gap and the label size are all derived from it — see NaverLoginButtonDefaults for the ratios and the assets they were measured from. Do not go below NaverLoginButtonDefaults.MinHeight: the mark stops clearing the 18 px floor the guidelines set for it.

Given no width, the button wraps its content. Given a wider one — Modifier.fillMaxWidth(), a fixed width, a stretching parent — the mark keeps its square at the leading inset and the label stays centred in the button, which is how NAVER's own wide artwork is laid out.

The button grows past height if the reader's font-size setting demands it, rather than clipping the label.

Parameters

onClick

Called when the user taps the button. Start the login here.

enabled

When false the button dims. NAVER publishes no disabled artwork and forbids a background colour it has not specified, so the whole button loses opacity rather than gaining a colour NAVER never drew.

text

The label. Defaults to NAVER's wording for the current locale. Pass null for an icon-only button, which the guidelines also permit — the mark then carries NAVER's wording as its accessibility label, so a screen reader still announces what the button does. Anything else must still say that the button logs in with NAVER; NaverLoginButtonText.Published has the alternatives NAVER itself offers.

height

The button height. Everything else is derived from it.

shape

Defaults to a circle for an icon-only button and to NAVER's 8 dp rounded rectangle otherwise, matching the two shapes the pack draws.

naverIcon

Defaults to the N mark from NAVER's official asset pack, bundled with this library. Replace it only with another asset from that pack — the guidelines forbid a modified, redrawn or outdated mark — and use a white one, since it is tinted per palette.