Button design examples

What makes a good button design?

A good button looks clickable, says what it does and is easy to hit. The label is a verb that names the result, such as "Save changes" or "Create account". The size meets the platform minimum, 44 by 44 points on iOS and 48 by 48 dp on Android. The contrast between the button and its background is at least 3 to 1, the WCAG minimum for interface components.

How many button styles does a product need?

Three levels cover most interfaces. A primary button for the main action on a screen, used once. A secondary button for alternatives. A tertiary or text button for low-priority actions such as "Cancel". A destructive style for delete actions is the usual fourth.

Which button states should be designed?

Six: default, hover, focus, pressed, disabled and loading. Focus is the one teams forget and keyboard users depend on. A loading state that keeps the button's width stops the layout from jumping while a request is in flight.

Where do these button examples come from?

Most are buttons from shipped apps documented by Mobbin, with button components and explorations from the Framer marketplace and Layers. Muzli follows more than 200 design sources and lists up to 60 matching pieces here, favouring recent work.