

You can configure a system button to use any combination of style and size. Each combination of size and style has a different level of visual prominence, helping you present hierarchies of actions within your app. IOS and iPadOS have four button styles, each available in three sizes. System buttons offer a range of styles that support extensive customization while providing built-in interaction states, accessibility support, and appearance adaptation. A button always includes a text label or a symbol (or interface icon) - and sometimes a combination of both - to help people predict what it does. On all screens, it’s essential to include enough space around a button so that people can visually distinguish it from surrounding components and content, whether people use touch, a pointer, or a system that expands a button when it’s in focus.Įnsure that each button clearly communicates it purpose. On a touchscreen, buttons need a hit target of at least 44x44 points to accommodate a fingertip. When buttons are instantly recognizable and easy to understand, an app tends to feel intuitive and well designed. There are also many button-like components that have distinct appearances and behaviors for specific use cases, like toggles, pop-up buttons, and segmented controls. In addition to all-purpose buttons, many common button styles - like Info, Close, and Contact Add - enable familiar behaviors throughout the system. A system-defined role that identifies a button’s semantic meaning and can affect its appearance. The symbol (or interface icon), text label, or both that a button displays to convey its purpose. A visual style based on size, color, and shape. In general, a button combines three attributes to clearly communicate its function: Versatile and highly customizable, buttons give people simple, familiar ways to do tasks in your app. A button initiates an instantaneous action.
