Avatar(
size = AvatarSize.md,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.default
)

Avatar(
size = AvatarSize.md,
type = AvatarType.initials(text:"Aa"),
state = AvatarState.default
)

Avatar(
size = AvatarSize.md,
type = AvatarType.image(AvatarImage.Drawable(R.drawable.img_person)),
state = AvatarState.default
)

3. Size

You can edit the size with the AvatarSize.xs, AvatarSize.sm, AvatarSize.md or AvatarSize.lg parameter.

Avatar(
size = AvatarSize.lg,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.default
)

Avatar(
size = AvatarSize.md,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.default
)

Avatar(
size = AvatarSize.sm,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.default
)

Avatar(
size = AvatarSize.xs,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.default
)

4. State

You can edit the state with the AvatarState.default, AvatarState.offline or AvatarState.online parameter.

Avatar(
size = AvatarSize.md,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.default
)

Avatar(
size = AvatarSize.md,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.offline
)

Avatar(
size = AvatarSize.md,
type = AvatarType.icon(R.drawable.profile),
state = AvatarState.online
)

Preview

Code

DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.default,
        showPresence: false,
      ),
DLAvatar(
        type: DLAvatarType.initials,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.default,
        showPresence: false,
        initials: 'Aa',
      ),
DLAvatar(
        type: DLAvatarType.image,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.default,
        showPresence: false,
        imageProvider: memoji,
      )

Copy

Usage

Add this code example to your project to see how the component works.

DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.default,
        showPresence: false,
      )

Copy

Examples

Size

Preview

Code

DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.default,
        showPresence: false,
      ),
DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.md,
        presence: DLAvatarPresence.default,
        showPresence: false,
      ),
DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.sm,
        presence: DLAvatarPresence.default,
        showPresence: false,
      ),
DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.xs,
        presence: DLAvatarPresence.default,
        showPresence: false,
      )

Copy

State

Preview

Code

DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.default,
        showPresence: false,
      ),
DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.offline,
        showPresence: true,
      ),
DLAvatar(
        type: DLAvatarType.icon,
        size: DLAvatarSize.lg,
        presence: DLAvatarPresence.online,
        showPresence: true,
      )

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version