# 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.

Page: https://www.appetiteui.com/glossary/button. Button styles on iOS and Material 3: filled, tonal, outlined. Also called Primary button, Secondary button, Icon button.

## 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.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Button: borderless, bordered, bordered prominent | Button: filled, tonal, outlined, elevated, text | Button |
| 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 |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Control corner | 8 pt | Fully round | `platform/control/corner` |

## 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

1. [Apple Human Interface Guidelines: Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons)
2. [Material Design 3: Buttons](https://m3.material.io/components/buttons/overview)
3. [Material Components for Android: Button](https://github.com/material-components/material-components-android/blob/master/docs/components/Button.md)

## Related

- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Material 3](https://www.appetiteui.com/docs/material-3)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)
- Glossary: [Corner radius](https://www.appetiteui.com/glossary/corner-radius)
- Glossary: [Floating action button](https://www.appetiteui.com/glossary/floating-action-button)