Skip to content

design-system: round every button at every size - #3126

Draft
StylianosGakis wants to merge 1 commit into
developfrom
design-system/round-all-buttons
Draft

design-system: round every button at every size#3126
StylianosGakis wants to merge 1 commit into
developfrom
design-system/round-all-buttons

Conversation

@StylianosGakis

@StylianosGakis StylianosGakis commented Sep 3, 2026

Copy link
Copy Markdown
Member

Design asked for every button in the app to be rounded, matching what the home screen already does (original thread, Android follow-up).

Opening as a draft because the change works but raises a design question that needs answering before it should land. See "The question for design" below.

What changed

Corner radius stops being a per-size property of a button and becomes a single ButtonTokens.ContainerShape = CornerFull that every button reads. Before, each size carried its own shape token:

Size Was Now
Large CornerLarge (12dp) CornerFull
Medium CornerMedium (10dp) CornerFull
Small CornerSmall (8dp) CornerFull
Mini CornerXSmall (6dp) CornerFull

A button's radius is no longer something a call site can choose, which is the "logic solution" Nils asked for in the thread. The radius tokens themselves are untouched and still used by cards, sheets, fields and everything else. Only buttons lose the option.

This also drops the HedvigButton shape override and the buttonShape parameter that CrossSells threaded through five composables to reach it. Every caller that passed one was asking for cornerFull, which is now the default.

Shape only. Padding, typography, colors and all eight existing styles are unchanged.

Deliberately not in scope

  • IconButton, Tab, Toggle keep their radius. Only HedvigButton and the wrappers that delegate to it change.
  • Renaming RoundedPrimary / RoundedLiquidGlass. "Rounded" is redundant now that every button is rounded, and Glass / LiquidGlass would read better, but the matching color tokens (ButtonRoundedPrimaryResting and ~16 siblings) live in ColorScheme.kt, so that rename drags a wide diff through the theme for zero visual gain. Separate PR if wanted.

Verification

  • :app:compileDebugKotlin green, so all 113 HedvigButton call sites typecheck
  • :design-system-hedvig:compileKotlinIosSimulatorArm64 green (the module is KMP)
  • ktlint clean on all three touched modules
  • No screenshot framework in the repo, so there are no baselines to update

RoundedPrimary and RoundedLiquidGlass already resolved to CornerFull, so the home screen renders unchanged. The whole visual diff is in the other six styles.

The design system matrix

Every size x style x state, light and dark. Before:

showcase before

After:

showcase after

What this looks like in the app

Walked on a Pixel 6 Pro. The pattern that emerged is narrower than "full-width pills look bad":

A full-width pill looks wrong when it shares an edge with a full-width 12dp element. Same width, stacked, so the two radii sit side by side and invite comparison.

The clearest case, the travel certificate departure step. Two CornerLarge text fields flush above the CTA. Before, the button's 12dp matched the fields exactly, which is evidently what it was designed for:

travel certificate before and after

Same shape in the edit-insurance bottom sheet, three 12dp radio cards stacked straight onto the pill:

edit insurance sheet

And a pill inset in a 12dp notification card:

payments card before and after

Other instances of the same thing: the travel certificate address step, the change-coverage QuoteCard, "Edit your insurance" under the addon card on contract detail, and "Add info" in the co-insured notification card.

Where it looks good

Content-width buttons and buttons among round shapes are fine or better. The help center CTA:

help center

Also good: the home draft-claim card's side-by-side Delete / Continue pills, and the cross-sell "Save 15%" pills next to the round pillow icons.

The question for design

Rounding only the buttons leaves the app internally inconsistent, because the elements buttons sit against keep 12dp. Two ways out:

  1. Raise the radius on the button's neighbours too (text fields, radio and selection cards, notification cards). This contradicts "other elements keep their radius".
  2. Give full-width Large buttons a large-but-not-full radius, and reserve the true pill for content-width buttons like the home quick actions and the help center CTA.

This is Nils' and Sladjan's call. The travel certificate pair above is the shot that frames it.

Not swept

Submit-claim, onboarding, moving flow and edit-coinsured, all skipped because walking them creates server-side state. Login and OTP are unreachable while signed in. A few screens showed real staging account data and were left out of this description.

Screenshots are hosted on the assets/round-all-buttons-screenshots branch to keep binaries out of this diff. Delete that branch when this PR closes.

Designers asked for all buttons in the app to be rounded, matching what the
home screen already does. Corner radius stops being a per-size property and
becomes one ButtonTokens.ContainerShape (CornerFull) that every button reads,
so a button's radius is no longer a choice a call site can make.

The radius tokens themselves are untouched and still used by cards, sheets,
fields and the rest of the system. Only buttons lose the option.

Drops the HedvigButton `shape` override and the buttonShape parameter that
CrossSells threaded through five composables to reach it, since every caller
that passed one was asking for the shape that is now the default.

RoundedPrimary and RoundedLiquidGlass already resolved to CornerFull, so the
home screen renders unchanged; the visual diff is in the other six styles.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant