Button: max three words; full width on mobile
button-max-three-words-mobile-full-width
Button label ≤3 words; verb; capital first letter; full-width on mobile, shrink-to-content on desktop. Inverted variant not on images unless contrast holds. Dual-cite Actions explicit verb; unique bits are the three-word cap and mobile full-width.
Description
Suomi.fi buttons use at most three words, start with a verb, capitalize the first letter, span the viewport on mobile, and shrink to content on desktop. Inverted variants stay off images unless contrast holds. Longer labels, fixed wide desktop blocks, mobile buttons that do not span, or inverted-on-image without contrast fail the pattern. Dual-cite explicit-verb action guidance; the unique bits here are the three-word cap and mobile full-width.
When to use
Labeling primary and secondary buttons in forms and flows.
Not when
Long help links, multi-sentence instructions, or icon-only controls with accessible names.
Agent hint
Cap button labels at three verb-first words; full-width mobile, content-width desktop.
Action labels ≤3 words, verb-first, capital first letter; small screens span the viewport; desktop width follows the label; inverted not on images unless contrast holds.
Action label longer than three words; mobile button does not span the viewport; desktop is a fixed wide block; inverted on an image without contrast.
Citations
Suomi.fi — Button
https://designsystem.suomi.fi/components/button/