Usage guidelines
When to use
- Labeling and bringing awareness to a specific element or feature (for example, noting when something is new or required)
When not to use
- 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
Best practices
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
Accessibility
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:
Color
Badge text must be clear so that users can understand the status without relying only on Badge color.
Design tokens
Anatomy
Variants
Type
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'. - Success
Indicates a constructive or successful state. For example, 'Available', 'Completed', 'Approved' or 'Added'. - Warning
Communicates cautionary or time-sensitive information to the user. For example, 'Busy', 'Missing' or 'Warning'. - Error
Informs the user of problems or errors that require potential action to correct. For example, 'Deleted' or 'Cancelled'. - Neutral
Indicates a general, non-critical status update. For example, 'Unavailable' or 'Not started'. - Recommendation
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.
Dark mode
Writing
For writing best practices, refer to the Content standards.
Do
- 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"
Don't
- Use conflicting language with defined type sentiments. For example, the error badge shouldn't say "Complete"