Avatar
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Avatar component is used to display profile pictures or provide easy visual access to account settings.
1. Reference
This component inherits props from the Avatar.
2. Type
You can edit the type with the icon, image or initials parameter.
Image 2.1 : Type icon
Image 2.2 : Type image
Image 2.3 : Type initials
3. Size
You can edit the size wit the xs, sm, md or lg parameter.
Image 3.1 : Size lg
Image 3.2 : Size md
Image 3.3 : Size sm
Image 3.4 : Size xs
4. State
You can edit the state wit the default, offline or online parameter.
Image 4.1 : State default
Image 4.2 : State offline
Image 4.3 : State online
SwiftUI
The DLAvatar component is used to display profile pictures or provide easy visual access to account settings.
1. Reference
This component inherits props from the Avatar.
-
2. Type
You can edit the type with the .icon, .image or .initials parameter.
type: .icon(icon: "ic_User"),
size: .md,
state: .normal
)
DLAvatar(
type: .initials(text: "NB"),
size: .md,
state: .normal
)
DLAvatar(
type: .image(image: "ic_Person"),
size: .md,
state: .normal
)
3. Size
You can edit the size with the .xs, .sm, .md or .lg parameter.
type: .icon(icon: "ic_User"),
size: .lg,
state: .normal
)
DLAvatar(
type: .icon(icon: "ic_User"),
size: .md,
state: .normal
)
DLAvatar(
type: .icon(icon: "ic_User"),
size: .sm,
state: .normal
)
DLAvatar(
type: .icon(icon: "ic_User"),
size: .xs,
state: .normal
)
4. State
You can edit the state with the .normal, .offline or .online parameter.
type: .icon(icon: "ic_User"),
size: .md,
state: .normal
)
DLAvatar(
type: .icon(icon: "ic_User"),
size: .md,
state: .offline
)
DLAvatar(
type: .icon(icon: "ic_User"),
size: .md,
state: .online
)
Jetpack Compose
The Avatar component is used to display profile pictures or provide easy visual access to account settings.
1. Reference
This component inherits props from the Avatar.
-
2. Type
You can edit the type with the AvatarType.icon, AvatarType.image or AvatarType.initials parameter.
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.
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.
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
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?