Avatar Badges
From syxUI — written for both platforms, not translated between them.
Avatars with status and count badges.
Badges · SwiftUI · iOS 17
- badges
- swiftui
The actual source
AvatarBadge.swift
// Avatar Badges · syxUI · https://syxui.dev/components/tag-avatar
// Free in any project. Keep this line and credit syxUI where a person can read it.
import SwiftUI
let tgGreen = Color(red: 0.16, green: 0.66, blue: 0.40)
let tgRed = Color(red: 0.90, green: 0.24, blue: 0.28)
// Avatar with badges
struct AvatarBadge: View {
var body: some View {
HStack(spacing: 24) {
Image("person_3").resizable().scaledToFill().frame(width: 52, height: 52).clipShape(Circle()).overlay(alignment: .bottomTrailing) { Circle().fill(tgGreen).frame(width: 15, height: 15).overlay(Circle().stroke(Color(.systemBackground), lineWidth: 2.5)) }
Image("person_4").resizable().scaledToFill().frame(width: 52, height: 52).clipShape(Circle()).overlay(alignment: .topTrailing) { Text("5").font(.system(size: 11, weight: .bold)).foregroundStyle(.white).frame(width: 20, height: 20).background(tgRed, in: Circle()).overlay(Circle().stroke(Color(.systemBackground), lineWidth: 2)).offset(x: 4, y: -4) }
}
}
}
iOS 17 · 2 dependencies
Dependencies
- SwiftUI
- person_3 (image asset)
- person_4 (image asset)
Requires iOS 17
