Structure
OUDSBadge
Badge is a UI element that emphasizes system notifications, status, or the categorization of an information, throughout colour only. Badge is rendered as a coloured shape, without icon, text or number; and its chosen size remains unchanged regardless of the changes of the interface size.
- iOS 15.0+
- macOS 13.0+
- tvOS 16.0+
- visionOS 1.0+
- watchOS 11.0+
@MainActor struct OUDSBadge
Mentioned In
Code samples
// Default badge is neutral with medium size
OUDSBadge(accessibilityLabel: "New feature available")
// Accent badge in small size without information
OUDSBadge(accessibilityLabel: "New feature available", status: .accent, size: .small)
// Negative badge in large size with count information
OUDSBadge(count: 9, accessibilityLabel: "9 new messages", status: .negative, size: .large)
// Info badge in medium size (default size) with default icon information
OUDSBadge(status: .info, accessibilityLabel: "Like", size: .medium)
// Badge with neutral status with a custom decorative icon
OUDSBadge(status: .neutral(icon: Image(decorative: "ic_heart")), accessibilityLabel: "Like", size: .medium)
// If your layout is in RTL mode but your badge has an icon with another meaning because of bad orientation,
// you can flip the icon
OUDSBadge(status: .neutral(icon: Image(decorative: "ic_heart"), flipped: true), accessibilityLabel: "Like", size: .medium)
Accessibility considerations
Sizes
Users may need to increase their text sizes. However by design their is no tokens for such cases. Thus, if large text is used, a factor is applied on the largest token value based on the size percentage rate. Thus it will make users able to have bigger badges.
Vocalizations
A badge needs an accessibility label to decribe the meaning that will be vocalized.
Design documentation
Themes rendering
Orange
Orange Compact
Sosh
Wireframe
Version
1.2.0 (Figma component design version)
Since
0.17.0
Topics
Initializers
init(accessibilityLabel: String, status: OUDSBadge.Status, size: OUDSBadge.StandardSize)Creates a basic badge.
init(accessibilityLabel: LocalizedStringKey, tableName: String?, bundle: Bundle, status: OUDSBadge.Status, size: OUDSBadge.StandardSize)Creates a basic badge.
init(count: UInt8, accessibilityLabel: String, status: OUDSBadge.Status, size: OUDSBadge.IllustrationSize)Creates a badge which displays numerical value (e.g., unread messages, notifications). Minimum and maximum values are 0 and 99 respectively. If value is greater than 99, “+99” is displayed. Negative values are not allowed by design. The background color of the badge and the number color are based on the given status.
init(count: UInt8, accessibilityLabel: LocalizedStringKey, tableName: String?, bundle: Bundle, status: OUDSBadge.Status, size: OUDSBadge.IllustrationSize)Creates a badge which displays numerical value (e.g., unread messages, notifications). Minimum and maximum values are 0 and 99 respectively. If value is greater than 99, “+99” is displayed. Negative values are not allowed by design. The background color of the badge and the number color are based on the given status.
init(status: OUDSBadge.StatusWithIcon, accessibilityLabel: String, size: OUDSBadge.IllustrationSize)Creates a badge which displays an icon to visually reinforce meaning. It is used for status indicators (e.g., “New”, “Pending”, “Success”). The background color of the badge and the icon color are based on the given status.
init(status: OUDSBadge.StatusWithIcon, accessibilityLabel: LocalizedStringKey, tableName: String?, bundle: Bundle, size: OUDSBadge.IllustrationSize)Creates a badge which displays an icon to visually reinforce meaning. It is used for status indicators (e.g., “New”, “Pending”, “Success”). The background color of the badge and the icon color are based on the given status.
Instance Properties
Enumerations