Mobile best practices
- Place primary buttons to the right or top of other buttons when in a button group.
- Keep elements inside a button container grouped. Label text and icons should remain centered when the Button width increases.
- Avoid using multiple button sizes in the same experience.
- If necessary, adjust the button placement and size when scaling from large screens to small screens.
For general Button best practices, refer to the Button web documentation.
Variants
Size
Mobile buttons are available in 2 sizes. The Button text always use $font-size-300 token (16pt).
- lg (60pt)
Large should be primarily used on Pinner, business and internal surfaces. - sm (44pt)
Small should be used sparingly and only in places where the UI is very dense.
size = “sm”
size = "lg"
Width
- Inline (default)
Inline is our default button width. The width of an inline Button is based on the length of its text. Use in most cases where you need a Button. - Full-width (fullWidth)
Full-width Buttons can be used in narrower content areas when the text in the Button is close to full width in the content area.
default
fullWidth
Styling
For information on color, icons, roles, and states, refer to the web Button documentation.
Writing
For writing best practices, refer to the web Button documentation.
Accessibility
People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Localization
For RTL (right-to-left) languages, the layout of the button is mirrored. The icon is placed on the right side of the text.