Button

Buttons allow users to perform actions within a surface. They can be used alone for immediate action, or as a trigger for another component, like Dropdown or Popover.

also known as Action, CTA

a red button that says Save

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

  1. lg (60pt)
    Large should be primarily used on Pinner, business and internal surfaces.
  2. sm (44pt)
    Small should be used sparingly and only in places where the UI is very dense.
a small red button that says Save

size = “sm”

a large red button that says Save

size = "lg"

Width

  1. 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.
  2. 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.
a default button that says Save and is the length of its text

default

a fullWidth button that says Save and is the length of its text

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.