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.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

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