Available from v7.0.0
BB.Emblem
BB.Emblem is a SwiftUI view element that displays an icon with customizable appearance and layout options.
Platform availability: iOS 17.0+
When to use:
- Use BB.Emblem when displaying local icons with semantic styling such as brand, status, or category indicators.
- Consider BB.AsyncEmblem when the icon needs to be loaded from a remote URL.
Import
import BackbaseDesignSystem
import SwiftUI
Visual reference
Light mode |
Dark mode |
API reference
BB.Emblem
Initializers
init(icon:appearance:layout:contentMode:)
Initializes a new emblem instance with the specified icon and styling options.
|
Parameter |
Type |
Default |
Description |
|---|---|---|---|
|
icon |
Image |
— |
The image to be displayed as the emblem |
|
appearance |
Appearance |
.brand |
Defines the visual styling of the emblem |
|
layout |
Layout |
.medium |
Defines the size or layout variant of the emblem |
|
contentMode |
ContentMode |
.fit |
Specifies how the image should be scaled |
Enumerations
Layout
Defines the different size variants for the emblem.
|
Case |
Raw Value |
Description |
|---|---|---|
|
small |
"sm" |
A compact version of the emblem |
|
medium |
"md" |
A medium-sized version (default) |
|
large |
"lg" |
A larger variant for more prominence |
|
xLarge |
"xl" |
The extra-large variant for maximum emphasis |
Appearance
Defines the different styling themes for the emblem.
Standard appearances:
|
Case |
Description |
|---|---|
|
brand |
The default branded appearance |
|
info |
Informational state styling |
|
success |
Success state styling |
|
warning |
Warning state styling |
|
danger |
Error state styling |
Category appearances:
|
Case |
Description |
|---|---|
|
category1 to category10 |
Additional styles for categorical grouping |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
icon |
Image |
— |
|
appearance |
Appearance |
.brand |
|
layout |
Layout |
.medium |
|
contentMode |
ContentMode |
.fit |
icon
The icon property sets the image to be displayed as the emblem. This can be a system image or a custom image from your assets.
BB.Emblem(icon: Image(systemName: "star.fill"))
appearance
The appearance property defines the visual styling of the emblem. Choose from semantic appearances (brand, info, success, warning, danger) or category appearances (category1 through category10).
BB.Emblem(
icon: Image(systemName: "checkmark"),
appearance: .success
)
layout
The layout property defines the size variant of the emblem. Options are small, medium, large, and xLarge.
BB.Emblem(
icon: Image(systemName: "star.fill"),
layout: .large
)
contentMode
The contentMode property specifies how the image should be scaled within the emblem bounds. Use .fit to maintain aspect ratio or .fill to fill the entire bounds.
BB.Emblem(
icon: Image("customIcon"),
contentMode: .fill
)
Usage
Basic usage
Create a basic emblem with default appearance and layout.
import SwiftUI
import BackbaseDesignSystem
let emblem = BB.Emblem(icon: Image(systemName: "star.fill"))
Custom appearance and layout
Create an emblem with custom styling options.
import SwiftUI
import BackbaseDesignSystem
let customEmblem = BB.Emblem(
icon: Image(systemName: "heart.fill"),
appearance: .success,
layout: .large,
contentMode: .fit
)
Using a different content mode
Create an emblem that fills its frame completely.
import SwiftUI
import BackbaseDesignSystem
let filledEmblem = BB.Emblem(
icon: Image("customIcon"),
contentMode: .fill
)
States and variants
Brand
The brand appearance uses the primary brand colors. This is the default appearance.
Visual characteristics:
- Brand-colored background
- Contrasting icon color
BB.Emblem(
icon: Image(systemName: "building.2"),
appearance: .brand
)
Info
The info appearance uses informational colors for neutral indicators.
Visual characteristics:
- Blue-tinted background
- Information-style icon color
BB.Emblem(
icon: Image(systemName: "info.circle"),
appearance: .info
)
Success
The success appearance uses success colors for positive indicators.
Visual characteristics:
- Green-tinted background
- Success-style icon color
BB.Emblem(
icon: Image(systemName: "checkmark.circle"),
appearance: .success
)
Warning
The warning appearance uses warning colors for caution indicators.
Visual characteristics:
- Yellow/orange-tinted background
- Warning-style icon color
BB.Emblem(
icon: Image(systemName: "exclamationmark.triangle"),
appearance: .warning
)
Danger
The danger appearance uses error colors for critical indicators.
Visual characteristics:
- Red-tinted background
- Danger-style icon color
BB.Emblem(
icon: Image(systemName: "xmark.circle"),
appearance: .danger
)
Category appearances
Category appearances (category1 through category10) are available for categorical grouping with distinct color schemes.
BB.Emblem(
icon: Image(systemName: "folder"),
appearance: .category1
)
Size variants
The layout property controls the emblem size.
HStack {
BB.Emblem(icon: Image(systemName: "star"), layout: .small)
BB.Emblem(icon: Image(systemName: "star"), layout: .medium)
BB.Emblem(icon: Image(systemName: "star"), layout: .large)
BB.Emblem(icon: Image(systemName: "star"), layout: .xLarge)
}
Customization
Styling
The component appearance is controlled through the appearance parameter. Each appearance maps to semantic colors from the design system.
|
Appearance |
Description |
|---|---|
|
.brand |
Primary brand colors |
|
.info |
Informational blue tones |
|
.success |
Success green tones |
|
.warning |
Warning yellow/orange tones |
|
.danger |
Error red tones |
|
.category1 - .category10 |
Categorical color schemes |
Custom icons
Use any SwiftUI Image as the emblem icon.
// System image
BB.Emblem(icon: Image(systemName: "star.fill"))
// Asset catalog image
BB.Emblem(icon: Image("myCustomIcon"))
// Design system asset
BB.Emblem(icon: Image.named(DesignSystem.Assets.icAccountBalance, in: .design))
Accessibility
This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the accessibility label for screen readers |
|
.accessibilityHint(_:) |
Provides additional context for the action |
|
.accessibilityValue(_:) |
Sets the current value for the element |
Best practices
- Provide meaningful accessibility labels that describe the element's purpose.
- Use accessibility hints to provide additional context when needed.
- Ensure all interactive elements are accessible.
BB.Emblem()
.accessibilityLabel("Descriptive label")
.accessibilityHint("Additional context")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
Tokens are defined in defaultTokens.json, which is integrated in the bundle of the framework, and can be customized by providing your own theme JSON file.
Token groups used by Emblem:
- theme.color.emblem: Emblem appearance variant colors (brand, info, success, warning, danger, category-1 to category-10)
Brand appearance tokens (example):
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.emblem.brand.background |
{theme.color.background.brand-subtle} |
|
Foreground |
theme.color.emblem.brand.foreground |
{theme.color.on-background.brand-subtle} |
|
Border |
theme.color.emblem.brand.border |
{theme.color.background.brand-subtle} |
Info appearance tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.emblem.info.background |
{theme.color.background.info-subtle} |
|
Foreground |
theme.color.emblem.info.foreground |
{theme.color.on-background.info-subtle} |
Dimension tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Radius (small) |
theme.dimension.radius.emblem.sm |
8 |
|
Radius (medium) |
theme.dimension.radius.emblem.md |
12 |
|
Radius (large) |
theme.dimension.radius.emblem.lg |
16 |
|
Radius (xLarge) |
theme.dimension.radius.emblem.xl |
20 |
|
Height (small) |
theme.dimension.height.emblem.sm |
40 |
|
Height (medium) |
theme.dimension.height.emblem.md |
48 |
|
Height (large) |
theme.dimension.height.emblem.lg |
64 |
|
Height (xLarge) |
theme.dimension.height.emblem.xl |
80 |
Semantic tokens
These tokens are accessed via the public DesignSystem.shared API.
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors |
Emblem background and foreground colors |
|
Corner Radius |
DesignSystem.shared.cornerRadius |
Emblem corner rounding per layout size |
See also
- BB.AsyncEmblem - Asynchronously loaded emblem from URL
- BB.Badge - Text-based status indicator with similar appearances