Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Avatar

A graphical representation of an object or entity

banner-Avatar
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

We don't use color as the only visual tool to convey information.
The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc. The title is the component name that uses the frame base component template. The base component name contains: .Base & "Component Name" if there is more than one. All component properties use the Legion foundation.
We can change all the parts that are connected to the component base. The inside of the base component remains connected to the master component. All variant options are not damaged when we change from one to another. Overriding changes to components will not reset other variants.
Component's already has component specs documentation.

Status

Resources

Usage

Avatar are used to defines graphical representation of a user or the user’s character or persona

Use Legion avatar styles to modify avatar with lots of attributes that make you easier

Default LegionUI, ThemeLGN, ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

  LGNAvatarVariant()

Variant

Legion iOS Have 3 Variant of Avatar :

Avatar Image

A. Avatar Image Local

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
        )
        .setBadgeOn(isOn: true)

B. Avatar Image System

        LGNAvatarImage(
            systemName: "person.3.fill",
        )
        .setBadgeOn(isOn: true)

C. Avatar Image Async

        LGNAvatarImage(
            urlString: "https://i.ibb.co/1btpjhH/persegipanjangvertical.jpg",
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

Avatar Icon

A. Avatar Icon Local

        LGNAvatarIcon(
            imageNamed: "SomeAssetName",
        )
        .setBadgeOn(isOn: true)

B. Avatar Icon System

        LGNAvatarIcon(
            systemName: "house"
        )
        .setBadgeOn(isOn: true)

C. Avatar Icon Async

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

Avatar Initial

Avatar Initial should add label: "value" where value consist the avatar initial

        LGNAvatarInitials(
            label: "Telkom Indonesia",
        )
        .setBadgeOn(isOn: true)

Attribute

Legion Have 3 Attributes for Costumize Avatar :

Size

This size attribute for user to choose the size of the avatar.

Avatar Image
Avatar Icon
Local
System
Async
Avatar Initial
Size Small Medium Large

Choose type avatar LGNAvatarImage , LGNAvatarIcon or LGNAvatarInitial , add sources imageNamed: "Link" , systemName: "Link" or urlString: "Link" where Link consist the value of the image. And add size: .sizeAvatar where .sizeAvatar consist .small , .medium or .large

This code sample demonstrates how to modify the size of the avatar :

A. Avatar Image Local Small

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .small
        )
        .setBadgeOn(isOn: true)

B. Avatar Image System Small

        LGNAvatarImage(
            systemName: "person.3.fill",
            size: .small
        )
        .setBadgeOn(isOn: true)

C. Avatar Image Async Small

        LGNAvatarImage(
            urlString: "https://i.ibb.co/1btpjhH/persegipanjangvertical.jpg",size: .small
            size: .small
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

D. Avatar Image Local Medium

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .medium
        )
        .setBadgeOn(isOn: true)

E. Avatar Image System Medium

        LGNAvatarImage(
            systemName: "person.3.fill",
            size: .medium
        )
        .setBadgeOn(isOn: true)

F. Avatar Image Async Medium

        LGNAvatarImage(
            urlString: "https://i.ibb.co/1btpjhH/persegipanjangvertical.jpg",
            size: .medium
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

G. Avatar Image Local Large

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .large
        )
        .setBadgeOn(isOn: true)

H. Avatar Image System Large

        LGNAvatarImage(
            systemName: "person.3.fill",
            size: .large
        )
        .setBadgeOn(isOn: true)

I. Avatar Image Async Large

        LGNAvatarImage(
            urlString: "https://i.ibb.co/1btpjhH/persegipanjangvertical.jpg",
            size: .large
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

J. Avatar Icon Local Small

        LGNAvatarIcon(
            imageNamed: "SomeAssetName",
            size: .small
        )
        .setBadgeOn(isOn: true)

K. Avatar Icon System Small

        LGNAvatarIcon(
            systemName: "house",
            size: .small
        )
        .setBadgeOn(isOn: true)

L. Avatar Icon Async Small

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .small
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

M. Avatar Icon Local Medium

        LGNAvatarIcon(
            imageNamed: "SomeAssetName",
            size: .medium
        )
        .setBadgeOn(isOn: true)

N. Avatar Icon System Medium

        LGNAvatarIcon(
            systemName: "house",
            size: .medium
        )
        .setBadgeOn(isOn: true)

O. Avatar Icon Async Medium

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .medium
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

P. Avatar Icon Local Large

        LGNAvatarIcon(
            imageNamed: "SomeAssetName",
            size: .large
        )
        .setBadgeOn(isOn: true)

Q. Avatar Icon System Large

        LGNAvatarIcon(
            systemName: "house",
            size: .large
        )
        .setBadgeOn(isOn: true)

R. Avatar Icon Async Large

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .large
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

S. Avatar Initial Small

        LGNAvatarInitials(
            label: "Telkom Indonesia",
            size: .small
        )
        .setBadgeOn(isOn: true)

T. Avatar Initial Medium

        LGNAvatarInitials(
            label: "Telkom Indonesia",
            size: .medium
        )
        .setBadgeOn(isOn: true)

U. Avatar Intial Large

Theme (ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy)

        LGNAvatarInitials(
            label: "Telkom Indonesia",
            size: .large
        )
        .setBadgeOn(isOn: true)

Ratio

Fill
Fit

This avatar attribute for user to choose the ration image position inside the avatar.

Choose size of the avatar size: .sizeAvatar where .sizeAvatar consist .small , .medium or .large and Use this function .aspectRatio(contentMode: .ratio) where ratio consist fit or fill if you add fit must add the backgroundColor: .color below size: .sizeAvatar where color is the color value

This code sample demonstrates how to modify the ratio of the avatar :

A. Small Fit

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .small,
            backgroundColor: .purple
        )
        .setBadgeOn(isOn: true)
        .aspectRatio(contentMode: .fit)

B. Small Fill

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .small
        )
        .setBadgeOn(isOn: true)
        .aspectRatio(contentMode: .fill)

C. Medium Fit

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .medium
            backgroundColor: .purple
        )
        .setBadgeOn(isOn: true)
        .aspectRatio(contentMode: .fit)

D. Medium Fill

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .medium
        )
        .setBadgeOn(isOn: true)
        .aspectRatio(contentMode: .fill)

E. Large Fit

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .large
            backgroundColor: .purple
        )
        .setBadgeOn(isOn: true)
        .aspectRatio(contentMode: .fit)

F. Large Fill

        LGNAvatarImage(
            imageNamed: "SomeAssetName",
            size: .large
        )
        .setBadgeOn(isOn: true)
        .aspectRatio(contentMode: .fill)

Show Progress

Show Progress
Not Show Progress

This label attribute to customize show progress async from url for avatar.

add sources imageNamed: "Link" , systemName: "Link" or urlString: "Link" where Link consist the value of the image. And add size: .sizeAvatar where .sizeAvatar consist .small , .medium or .large finish it with .setPlaceholder(isProgressViewOn: true) or .setPlaceholder(isProgressViewOn: false)

This code sample demonstrates how to modify the show progress of the async avatar :

A. Small Show Progress

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .small
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

B. Small Not Show Progress

Default LegionUI

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .small
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: false
        )

C. Medium Show Progress

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .medium
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

D. Medium Not Show Progress

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .medium
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: false
        )

E. Large Show Progress

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .large
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: true
        )

F. Large Not Show Progress

        LGNAvatarIcon(
            urlString: "https://i.ibb.co/yQPCHqz/houseicon.png",
            size: .large
        )
        .setBadgeOn(isOn: true)
        .setPlaceholder(
            isProgressViewOn: false
        )

Properties

LGNAvatarImage

PropertiesDescriptionDefault Value
imageNamedThe name of the local asset that you want to use.required or no default value
sizeThe size of the avatar, there are three size: .small , .medium , .largerequired or no default value
backgroundColorThe color of the avatar background.Color.LGNTheme.tertiary100
systemNameThe name of the system name from SF Symbols that you want to use. (https://developer.apple.com/design/resources/#sf-symbols)required or no default value
sizeThe size of the avatar, there are three size: .small , .medium , .largerequired or no default value
backgroundColorThe color of the avatar background.Color.LGNTheme.tertiary100
urlStringThe url asset that you want to use. We recommend you to use .jpg, .jpeg, and .png format.required or no default value
sizeThe size of the avatar, there are three size: .small , .medium , .largerequired or no default value
backgroundColorThe color of the avatar background.Color.LGNTheme.tertiary100

LGNAvatarIcon

PropertiesDescriptionDefault Value
imageNamedThe name of the local asset that you want to use.required or no default value
sizeThe size of the avatar, there are three size: .small , .medium , .largerequired or no default value
iconColorThe color of the icon.Color.white
backgroundColorThe color of the avatar background.Color.LGNTheme.tertiary500
systemNameThe name of the system name from SF Symbols that you want to use. (https://developer.apple.com/design/resources/#sf-symbols )required or no default value
sizeThe size of the avatar, there are three size: .small , .medium , .largerequired or no default value
iconColorThe color of the icon.Color.white
backgroundColorThe color of the avatar background.Color.LGNTheme.tertiary500
urlStringThe url asset that you want to use. We recommend you to use .jpg, .jpeg, and .png format.required or no default value
sizeThe size of the avatar, there are three size: .small , .medium , .largerequired or no default value
iconColorThe color of the icon.Color.white
backgroundColorThe color of the avatar background.Color.LGNTheme.tertiary500

LGNAvatarInitials

PropertiesDescriptionDefault Value
labelThe long text that you want to take the initials of to appear on the avatar.required or no default value
fontFamilyThe font family for the label.""
textColorThe color of the text string.Color.white
backgroundColorThe color of the avatar background.Color.LGNTheme.primary500

Example Project

LGNAvatarIcon(urlString: "https://picsum.photos/100", size: .small, iconColor: .blue, backgroundColor: .red)
LGNAvatarIcon(imageNamed: "foo", size: .small, backgroundColor: .gray)
LGNAvatarIcon(systemName: "heart", size: .small, backgroundColor: .clear)
  .setPlaceholder(isProgressViewOn: true, backgroundColor: .clear)
  .setPlaceholder(systemName: "xmark", isProgressViewOn: true, backgroundColor: .clear)
  .setPlaceholder(imageNamed: "asset-image", isProgressViewOn: true, backgroundColor: .clear)
  .setPlaceholder(label: "loading..", isProgressViewOn: true, fontFamily: "", textColor: .white, backgroundColor: .clear)
  .aspectRatio(contentMode: .fill)
  .setBackgroundColor(color: .red)