data-display/DSAvatar

DSAvatar

data-display

since v1.0

Represents a user with initials or an image. Supports 5 sizes and an online/offline/busy/away status indicator.

iOS 17+macOS 14+

Purpose

Visual identification of users in lists, profiles, comments, and navigation bars.

Props

Prop	Type	Default	Description
initials	String?	nil	Up to 2 characters as a fallback.
imageURL	URL?	nil	User image URL.
size	DSAvatarSize	.md	.xs / .sm / .md / .lg / .xl
status	DSAvatarStatus?	nil	Presence indicator (.online, .offline, .busy, .away).
tint	Color	DSColor.primary	Background and initials text colour.

Examples

Avatar with status

Online user in a sidebar.

swift

DSAvatar(
    initials: "JD",
    size: .lg,
    status: .online,
    tint: DSColor.primary
)

Avatar group

Project collaborators.

swift

DSAvatarGroup(
    items: [
        ("AB", DSColor.primary),
        ("CD", DSColor.accent),
        ("EF", DSColor.success),
    ],
    size: .sm,
    max: 3
)

Usage Guidelines

Always provide initials as a fallback when imageURL is nil.
.busy means do-not-disturb, not an error.

Related Components

AvatarGroup UserProfileCard