lineloginkmp-compose/dev.yjyoon.lineloginkmp.compose/LineLoginButton

LineLoginButton

@Composable

fun LineLoginButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: String? = LineLoginButtonText.current().long, height: Dp = LineLoginButtonDefaults.Height, shape: Shape = LineLoginButtonDefaults.shape(height), textStyle: TextStyle = LineLoginButtonDefaults.textStyle(height), lineIcon: Painter = LineLoginButtonDefaults.lineIcon(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

A "Log in with LINE" button that follows LINE's button design guidelines.

LineLoginButton(onClick = { scope.launch { handle(LineLogin.login()) } })

That is the whole thing: LINE's own icon, LINE's own caption for the reader's language, and the colours, divider, corner radius and padding taken from LINE's button artwork.

The guidelines are not advice — LINE requires them, and a non-designated colour or a modified icon is a compliance problem rather than a cosmetic one. So this button does not let you change the palette, and the state treatments are the ones LINE specifies: a 10% black overlay on hover, 30% on press, and a white button with a border and grey content when disabled.

Sizing

Scale with height. Everything else — the icon, the divider, the padding, the corner radius, the caption size — is derived from it, so the icon's aspect ratio and the required padding hold at any size. See LineLoginButtonDefaults for the ratios and where they were measured from.

Given no width, the button wraps its content. Given a wider one — Modifier.fillMaxWidth(), a fixed width, a stretching parent — the icon square keeps its 1:1 ratio at the leading edge and the caption area takes the extra width.

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

Isolation zone

The guidelines also require empty space around the button, which a composable cannot enforce from the inside. Keep other content LineLoginButtonDefaults.isolationZone away from it.

Parameters

onClick

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

enabled

When false the button turns white with a border and grey content, per the guidelines — not a dimmed green.

text

The caption. Defaults to LINE's recommended phrase for the current locale. Pass null for an icon-only button, which the guidelines also permit — the icon then carries LINE's wording as its accessibility label, so a screen reader still announces what the button does. Anything else must be a single line that makes clear the button logs in with LINE.

height

The button height, and the side of the square the icon sits in.

lineIcon

Defaults to the icon from LINE's official template, bundled with this library. Replace it only with another asset from that template — the guidelines forbid a modified or outdated mark — and use a white one, since it is tinted per state.