NaverLoginButtonDefaults

Geometry and typography for NaverLoginButton, measured off NAVER's own button artwork.

Everything that scales follows from one number, the button's height, so the mark's aspect ratio and the spacing around it hold at any size. The ratios below come from the H48 files in NAVER's asset pack, which are drawn at 4x — a 192 px-tall PNG is a 48 dp button, so every pixel measurement divides by four:

Measured fromPixels (4x)dp at H48Ratio
..._green_icon_H48.png, mark bounding box7218height × 18/48
..._green_wide_H48.png, mark's left inset8020height × 20/48
The guide's centred-layout figure328height × 8/48
..._green_wide_H48.png, Hangul advance5814.5height × 14.5/48

The two numbers that are not ratios

NAVER hand-tunes its H56 artwork rather than scaling the H48 one — the mark goes 18 → 20 dp, the label 14.5 → 15.3 dp — but the corner radius stays at 32 px and the border at 4 px in both, so those two are constants here rather than fractions of the height. Deriving them from the height would contradict the only two files NAVER publishes.

Properties

Link copied to clipboard
val BorderWidth: Dp

4 px at 4x, on every bordered asset in the pack.

Link copied to clipboard
val CornerRadius: Dp

32 px at 4x, on the H48 and the H56 artwork alike — a constant, not a fraction of the height.

Link copied to clipboard
val Height: Dp

The smaller of NAVER's two published button heights, and the one its H48 pack is drawn at.

Link copied to clipboard
val MinHeight: Dp

Below this the mark stops being legible at the size NAVER requires.

Functions

Link copied to clipboard
fun labelGap(height: Dp = Height): Dp

The gap between the mark and the label.

Link copied to clipboard
fun leadingInset(height: Dp = Height): Dp

The empty space before the mark on a left-aligned button.

Link copied to clipboard
fun markSize(height: Dp = Height): Dp

The side of the square the N mark is drawn in.

Link copied to clipboard
@Composable
fun naverIcon(): Painter

The N mark, lifted from NAVER's official asset pack and bundled with this library.

Link copied to clipboard
fun shape(iconOnly: Boolean = false): Shape

The button's outline.

Link copied to clipboard
fun textStyle(height: Dp = Height): TextStyle

Scaled with the button, and deliberately smaller than the mark: 텍스트는 로고 높이보다 작은 크기를 사용해야 해요. 14.5 sp against an 18 dp mark at Height.