Button
A button is the control that starts an action when tapped. iOS styles it as borderless, bordered or bordered prominent, and Material 3 offers filled, tonal, outlined, elevated and text buttons.
Why it matters
Buttons carry the hierarchy of a screen: the style says which action is the main one. Apple asks for a prominent style on the most likely action in a view and for style, not size, to mark the preferred choice.
Two platforms name the styles differently, so a shared design needs one ranking that maps to both.
Button on iOS and Android
Also called Primary button, Secondary button, Icon button. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Button: borderless, bordered, bordered prominent | Button: filled, tonal, outlined, elevated, text | Button |
| Minimum touch target | 44 pt | 48 dp | platform/ |
| Control corner | 8 pt | Fully round | platform/ |
| Icon button in the file | 50 circle, the Liquid Glass symbol button | Icon button, 40 by 40 | See below |
| Floating action button in the file | None, use a toolbar action | 40, 56 and 96 | See below |
In Appetite UI
The Button component holds every combination of type, style, size, state and icon-only as real variants, read from the Figma file, and the Liquid Glass sets add Glass and Glass Prominent for iOS. Compact Button is a 32 circle and the Floating Action Button is a 56 circle.
Control corner and touch target are Platform variables, so one switch on a frame moves a button from 8 to fully round and from 44 to 48.
Example
A checkout screen has one prominent button, Pay, and one quiet Cancel beside it at the same size. On iOS Pay is bordered prominent and Cancel borderless; on Android Pay is filled and Cancel a text button.
Common mistakes
- Two prominent buttons on one screen. Rank the actions and give only the likeliest the strong style.
- Telling the choices apart by size. Keep the same size and change the style.
- Labelling a button with a vague word such as Submit. Name the result.
- Making a button shorter than the touch target. Grow the target and keep the look.
Questions
What are the button styles on iOS?
Borderless, bordered and bordered prominent, in small, medium and large sizes, with a destructive role. Apple uses the prominent style for the most likely action in a view.
What are the button types in Material 3?
Filled, tonal, outlined, elevated and text. Filled has the most emphasis and text the least, so the type says how important the action is.
Sources
The pages the facts above rest on, each read October 30, 2026.