- Labeling and bringing awareness to a specific element or feature (for example, noting when something is new or required)
- Providing feedback at the element level (for example, displaying error messages). Use inline text instead.
- Requiring interaction from users, since Badges are always static and non-interactive
For general Badge best practices, refer to the Badge web documentation.
- Use only one or two words to describe Badge status
- Badge must always be paired with the element that they're associated with
- Avoid displaying multiple Badges in the same experience, since they label a state to an element
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:
Badge text must be clear so that users can understand the status without relying only on Badge color.
The badge is available in six styles. Each type has a semantic meaning and represents a sentiment.
- Info (default)
Communicates helpful information or an important attribute. For example, 'New' or 'Help'.
Indicates a constructive or successful state. For example, 'Available', 'Completed', 'Approved' or 'Added'.
Communicates cautionary or time-sensitive information to the user. For example, 'Busy', 'Missing' or 'Warning'.
Informs the user of problems or errors that require potential action to correct. For example, 'Deleted' or 'Cancelled'.
Indicates a general, non-critical status update. For example, 'Unavailable' or 'Not started'.
Highlights suggestions that'll improve the experience and achieve better results. For example, 'Recommended for you'.
Light wash / Dark wash
Badge with wash style may be used over media.
- Light wash
The light wash badge should be used over media that's dark or uses a dark gradient overlay.
- Dark wash
The dark wash badge should be used over media that's light or uses a light gradient overlay.
For writing best practices, refer to the Content standards.
- Use a single word to describe the status of an element. For example, "New" not "New post"
- Where applicable, describe the status in past tense. For example, "archived" not "archive"
- Use conflicting language with defined type sentiments. For example, the error badge shouldn't say "Complete"