lineloginkmp-compose/dev.yjyoon.lineloginkmp.compose/LineLoginButtonDefaults

LineLoginButtonDefaults

Geometry and typography for LineLoginButton, derived from LINE's own button artwork.

Everything here follows from one number, the button's height, because that is how LINE's template is built: the icon sits in a square the full height of the button, and the guidelines then define the text padding in terms of the speech bubble inside that square (which they call X). The ratios below were measured from the 20dp, 32dp and 44dp buttons in LINE's template rather than guessed:

Button height	Corner radius	X (bubble width)	Text padding
44 dp	6.0 dp	32.0 dp	32.5 dp
32 dp	4.0 dp	23.0 dp	24.5 dp
20 dp	2.5 dp	15.0 dp	16.0 dp

So X ≈ height × 0.727, the corner radius is height / 8, the horizontal text padding is X and the vertical padding is X / 2 — which is exactly what the guidelines ask for.

Properties

Height

val Height: Dp

LINE's largest reference button, and the size its template is centred on.

Functions

bubbleWidth

fun bubbleWidth(height: Dp = Height): Dp

X: the width of the LINE icon's speech bubble at this button height — the measurement the guidelines define the padding and the isolation zone from.

isolationZone

fun isolationZone(height: Dp = Height): Dp

The empty space that must surround the button. Apply it yourself — as padding on the button, or as spacing in the layout around it — and keep other text and graphics out of it.

lineIcon

@Composable

fun lineIcon(): Painter

The LINE icon, from LINE's official button template, bundled with this library.

shape

fun shape(height: Dp = Height): Shape

height / 8, matching the radius of LINE's own button images.

textHorizontalPadding

fun textHorizontalPadding(height: Dp = Height): Dp

Left and right padding around the caption: X.

textStyle

fun textStyle(height: Dp = Height): TextStyle

Scaled with the button, so a caption still fits the padding the guidelines require. In sp, so it respects the reader's font-size setting; a very large setting grows the button rather than clipping the text.

textVerticalPadding

fun textVerticalPadding(height: Dp = Height): Dp

Top and bottom padding around the caption: X / 2.