Button
Buttons are used to initiate an action upon tap.
Types
Primary
Secondary
Tertiary
Usage
Buttons represent actions, such as submitting data, launching elements, toggling visibility, etc. If navigating to a different site or page, a link should be used.
Overview
- Primary Button: Used to call attention to the main action of the page or large section. Though it should generally be used only once per page, Primary Buttons can be used multiple times if representing parallel primary actions, such as “Add to Cart.”
- Secondary Button: Used for general actions on a page or in a section
- Tertiary Button: Used for subtle actions on a page or in a section that are not a priority
Button order
Primary actions should generally be presented first within a group of buttons.
Most directional patterns on iOS utilize the navigation bar where “Back” is in the top left and “Next” is in the top right. However, a Primary Button can also be used when needing to call attention to directional actions.
For scenarios that require directional buttons in a horizontal group, the button type layout should appear in a more natural order.
Button groups
Use button groups when you are presenting multiple priorities or emphasis.
Similar priorities
Width
Buttons will generally be full-width of the view or parent container with minimum 16pt margins.
Buttons may support variable width based on its label length for specific scenarios that may require a smaller CTA. Considerations of label length should be accounted for in addition to minimum touch target, which is 48pt x 48pt.
Behavior
Label Wrapping
Button will wrap labels that extend beyond the Button width bounds due to long character lengths or large font-sizes that may be dictated by the user’s font settings.
Button Labels will default to centered alignment when single line, and will display left aligned when wrapped for improved legibility.
Visual Style
Icons
Icons can be added adjacent to the label as a decorative element that is relative to the action or purpose of the button.
Leading or trailing placement should be influenced by usability and context of the icon & action.
Content Strategy
- Use Title Case
- Lead with a verb
- Aim for short actions, around 1-4 words
- Use simple global commands when possible: Save, Back, Next, Apply, etc.
- Add specificity with purpose (e.g. “Assign as Primary Care Physician” brings necessary meaning to the action, compared to the shorter “Assign”)
- Accessibility Hint added when action label doesn’t provide enough context. (Example: {Button Label}, “Confirm Quantity”, Accessibility Hint “double tap to confirm amount and review order ”)
Accessibility
Characteristics
- Performs actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information
- Button Labels will default to centered alignment when single line, and will display left aligned when wrapped for improved legibility
Focus expectations
- Focus stays on button until action is performed
- Following button activation, focus is set depending on the type of action the button performs
Screen reader expectations
- “{Button Label}, button”
- Disabled state: “{Button Label}, dimmed, button”
- Icons don’t receive focus since they are decorative