Available from v8.0.0
BB.Avatar
BB.Avatar is a SwiftUI view that displays a user's profile image, initials, or icon in different sizes.
Platform availability: iOS 17.0+
When to use:
- Use BB.Avatar when displaying user identity in profile headers, contact lists, message threads, or account summaries.
- Consider using initials or icon fallbacks when profile images are unavailable to maintain visual consistency.
Import
import BackbaseDesignSystem
import SwiftUI
Visual reference
|
|
|
|
|
API reference
BB.Avatar
Initializers
init(layout:appearance:)
Creates a new avatar with the specified layout and appearance.
|
Parameter |
Type |
Default |
Description |
|---|---|---|---|
|
layout |
BB.Avatar.Layout |
.default |
The layout determines the size of the avatar |
|
appearance |
BB.Avatar.Appearance |
— |
The appearance specifies the style: image, initials, or profile icon |
Layout
The BB.Avatar.Layout enumeration defines the available avatar sizes.
enum Layout {
case `default`
case small
case medium
case large
}
|
Value |
Description |
|---|---|
|
.default |
Default avatar with size 40 |
|
.small |
Small avatar with size 24 |
|
.medium |
Medium avatar with size 56 |
|
.large |
Large avatar with size 80 |
Appearance
The BB.Avatar.Appearance enumeration defines the avatar content types.
enum Appearance {
case image(UIImage)
case initials(String)
case icon
}
|
Value |
Description |
|---|---|
|
.image(UIImage) |
An avatar displaying an image |
|
.initials(String) |
An avatar displaying initials (clipped to two characters) |
|
.icon |
An avatar displaying the default profile icon |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
layout |
BB.Avatar.Layout |
.default |
|
appearance |
BB.Avatar.Appearance |
— |
layout
The layout property determines the size of the avatar. Choose the appropriate size based on the context where the avatar is displayed.
BB.Avatar(layout: .large, appearance: .icon)
appearance
The appearance property specifies what content the avatar displays. Use .image for profile photos, .initials for text-based representation, or .icon for the default profile icon.
BB.Avatar(appearance: .initials("JD"))
Usage
Basic usage
Create an avatar with an image.
import SwiftUI
struct ContentView: View {
var body: some View {
BB.Avatar(appearance: .image(UIImage(named: "Avatar")!))
}
}
Common use cases
With initials
Display initials when no image is available.
var body: some View {
BB.Avatar(appearance: .initials("JD"))
}
Different sizes
Use different layout sizes based on context.
var body: some View {
HStack {
BB.Avatar(layout: .small, appearance: .icon)
BB.Avatar(layout: .default, appearance: .icon)
BB.Avatar(layout: .medium, appearance: .icon)
BB.Avatar(layout: .large, appearance: .icon)
}
}
With profile icon
Display the default profile icon.
var body: some View {
BB.Avatar(layout: .large, appearance: .icon)
}
States and variants
Image appearance
The avatar displays a user-provided image.
Visual characteristics:
- Circular cropped image
- Scales to fit the layout size
BB.Avatar(appearance: .image(UIImage(named: "profilePhoto")!))
Initials appearance
The avatar displays user initials when no image is available.
Visual characteristics:
- Brand-colored background
- Centered initials text (clipped to two characters)
- Typography scaled based on layout size
BB.Avatar(appearance: .initials("JD"))
Icon appearance
The avatar displays a default profile icon.
Visual characteristics:
- Brand-colored background
- Centered profile icon
- Icon size scaled based on layout
BB.Avatar(appearance: .icon)
Size variants
The avatar is available in multiple sizes through the Layout enumeration.
|
Size |
Dimension |
Use case |
|---|---|---|
|
.small |
24pt |
Compact lists, inline mentions |
|
.default |
40pt |
Standard list items, comments |
|
.medium |
56pt |
Contact details, cards |
|
.large |
80pt |
Profile headers, detail views |
Customization
Styling
The BB.Avatar component uses the design system's avatar styling tokens. Customization is applied through the theming infrastructure.
Custom styles
To customize avatar appearance, modify the theme tokens in your custom JSON theme file and load it using Theme.switchTo():
Theme.switchTo("customTokens")
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.Avatar(layout: .medium, appearance: .initials("JD"))
.accessibilityLabel("John Doe profile picture")
.accessibilityHint("User avatar showing initials")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Background color |
Theme.colors.background.brand |
Background color for initials and icon appearances |
|
Foreground color |
Theme.colors.onBackground.brand |
Text/icon color for initials and icon appearances |
|
Typography |
DesignSystem.shared.typography |
Typography style for initials text (scaled per layout size) |
|
Corner radius |
DesignSystem.shared.cornerRadius.full |
Full corner radius creating the circular shape |
See also
- BB.Button - For action buttons
- BB.StateView - For empty and error states