A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action.
Examples of a standard button (left), toggle buttons (middle) and a directions button (right)
A button can consist of a label and a symbol on a filled or unfilled rectangular background.
Symbol buttons, label buttons, and label buttons with a symbol
Buttons have several states that provide feedback on a button’s interaction:
A: Active State: Indicates a button’s interactivity.
B: Tap State: Communicates that the button has been pressed.
C: Disabled State: Discloses that the action is available but has been disabled.
D: Keyboard Focus State: Indicates that the button is focused when navigating with a keyboard
E: VoiceOver Focus State: Indicates that the button is a focus target during VoiceOver interaction
Active, tapped, disabled, keyboard-focused, VoiceOver-focused buttons
The toggle buttons change between primary and secondary buttons. The buttons are used when there is a direct action to take on an object that does not require navigation, Such as:
- Follow / Unfollow
- Select / Selected
- Bookmark / Unbookmark
- Favorite / Unfavorite
- Hold / Release
Buttons now have three main types based on the priority of each action.
- Primary Button
- Secondary Button
- Tertiary Button
Primary, Secondary, and Tertiary buttons with symbols and labels
Use the primary button on a sign-in screen, landing screen, confirmation screen, error screen, or on a screen that has one explicit primary action. The following are examples applicable to primary buttons:
- Sign in
Primary buttons in scan and sign-in use cases
Use the secondary button when actions are optional or have lower priority.
A card showing "Dismiss" button in the Secondary type
Use the tertiary button when the action has the lowest priority, or they are parts of navigation. Tertiary buttons usually contain either only text content or only symbol.
An example of a navigation bar with neutral Tertiary symbol buttons
Buttons also have additional two styles:
- Tint Button
- Negative Button
Tint and negative buttons
The tint button style can emphasize available actions and encourage users to interact with them. The Primary button’s default style is not different from the tint one.
The negative button style indicates destructive actions and warns users to take extra precautions when interacting with the buttons.
Buttons are by default dynamic in width and are dependent on the container they are placed in, but they can also be set to a fixed width and height.
A touch area of a button should not be less than 44pt.