Usage
Reference HIG for general guidance when designing for iOS.
Design properties
| Property | Values | Default |
|---|---|---|
| Type Variant | Primary | Secondary | Tertiary | Primary |
| State Variant | Default | Hover | Disabled | Default |
Types
Primary
Secondary
Tertiary
Destructive
Writing guidelines
Button label text should be clear, descriptive, and use active verbs so people know what to expect when they interact with the button.
- Write labels in title case.
- Lead with clear action verbs that convey the outcome.
- Use Choose or Select in place of Click or Tap.
- Be consistent with terms inside the button and any instructional text.
- When possible, include labels when using icons.
- Use unnecessary words or articles, such as "the, an, or a".
- Use ellipses in a label unless it leads to additional choices
- Use “OK” as a label, button labels should always be actionable and lead to what comes next
Casing: Follow Apple Human Interface Guidelines, which uses headline-style title case capitalization. Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters.
See Capitalization for more guidance.
Width: Set a max width for the button, designing for at least 50+ string growth compared to English. Buttons themselves should not have a hard-coded fixed width — width is determined by length of text labels.
Stacking: Allow buttons to grow as much as they need to within the max width. When you have two buttons and they don’t fit in the same line, then wrap the button component itself (not the button text). The secondary button will move to the second line. Both buttons will be the same width.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 1, 2025 |
2.1.0 |
Updated to reflect new iOS library |
|
Apr 17, 2025 |
2.0.0 |
Simplified template |
|
Feb 15, 2023 |
1.0.0 |
Initial draft of button guidance |