Dynamic Layer
v5.1
Introduction
About
Getting started
What's new
Changelog
Roadmap
Components
Accordion
Alert
Avatar
Badge
Bottom Navigation
Bottom Sheet
Button
Button Dock
Button Icon
Button Loading
Button Timed
Card
Calendar 🔴
Checkbox
Chip
Coach Mark
Input
Input OTP
Line Item
Line Item Message
Loading Dots
Message
Message Loading
Message Dock
Pagination
Pin Keyboard
Progress
Radio Button
Search Field
Separator
Segmented Control
Snackbar
Skeleton
Slider
Switch
Tab Control
Tag
Textarea
Tooltip
Top Navigation
Top Navigation Message
Templates
Account Setup
Account
Chat
Country selection
Filter
Forgot password
Inbox
Log in
Passcode
Paywall
Search
Sign up
Splash Screen
Verification
Product
Grid
Iconography
Screen Sizes
Toolkit
Brand
App Icon
Colors
Illustrations
Logo Versions
Typography
Design Tokens
Background Color
Border Color
Radius
Border Width
Font Size
Font Weight
Font Family
Line Height
Letter Spacing
Breakpoints
Spacing
Shadows
Dark Mode
Introduction
About
Getting started
Changelog
Roadmap
Accordion
Alert
Avatar
Avatar Group
Badge
Bottom Navigation
Bottom Sheet
Button
Button Dock
Button Icon
Button Loading
Button Timed
Card
Checkbox
Chip
Coach Mark
Input
Input OTP
Line Item
Line Item Message
Loading Dots
Message
Message Loading
Message Dock
Pagination
Pin Keyboard
Progress
Radio Button
Radio Group
Search Field
Separator
Segmented Control
Snackbar
Skeleton
Slider
Switch
Tab Control
Tag
Textarea
Tooltip
Top Navigation
Top Navigation Message
Account Setup
Account
Chat
Country selection
Filter
Forgot password
Inbox
Log in
Passcode
Paywall
Search
Sign up
Splash Screen
Verification
Grid
Iconography
Screen Sizes
Toolkit
App Icon
Colors
Illustrations
Logo Versions
Typography
Background Color
Border Color
Radius
Border Width
Font Size
Font Weight
Font Family
Line Height
Letter Spacing
Breakpoints
Spacing
Shadow
Dark mode

Avatar

PRO

You can edit 8 Components for free. Get premium for unlimited access.

An image element with a fallback for representing the user.

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.

Prop
Type
Default
type
AvatarType.icon
AvatarType.image
AvatarType.initials

-

size
AvatarSize.xs
AvatarSize.sm
AvatarSize.md
AvatarSize.lg
AvatarSize.lg
state
AvatarState.default
AvatarState.offline
AvatarState.online
AvatarState.default

2. Type

You can edit the type with the AvatarType.icon, AvatarType.image or AvatarType.initials parameter.

NB
avatar-img
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

Preview

Code

Aa
avatar-img
Wrap(
  spacing: DlSpacingTokens.p_12,
  runSpacing: DlSpacingTokens.p_12,
  children: const [
    DlAvatar(
      size: DlAvatarSize.lg,
      type: DlAvatarType.icon
    ),
    DlAvatar(
      size: DlAvatarSize.lg,
      type: DlAvatarType.initials,
      initials: 'Aa'
    ),
    DlAvatar(
      size: DlAvatarSize.lg,
      type: DlAvatarType.image
    ),
  ],
)
Copy

Usage

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

DlAvatar(
    size: DlAvatarSize.lg,
    type: DlAvatarType.initials,
    initials: 'Aa',
    state: DlAvatarState.defaultState
    )
Copy

API Reference

DlAvatar is a rounded token-based avatar component that supports multiple sizes, icon/initials/image types, and optional online/offline status indicators.

Prop
Type
Default
size
lg
md
sm
xs
lg
state
defaultState
online
offline
defaultState
type
icon
initials
image
icon
initials
String
AA

Examples

Size

Preview

Code

Wrap(
  spacing: DlSpacingTokens.p_12,
  runSpacing: DlSpacingTokens.p_12,
  children: const [
    DlAvatar(
      size: DlAvatarSize.lg,
      type: DlAvatarType.icon
    ),
    DlAvatar(
      size: DlAvatarSize.md,
      type: DlAvatarType.icon
    ),
    DlAvatar(
      size: DlAvatarSize.sm,
      type: DlAvatarType.icon
    ),
    DlAvatar(
      size: DlAvatarSize.xs,
      type: DlAvatarType.icon
    ),
  ],
)
Copy

State

Preview

Code

Wrap(
  spacing: DlSpacingTokens.p_12,
  runSpacing: DlSpacingTokens.p_12,
  children: const [
    DlAvatar(
      size: DlAvatarSize.lg,
      type: DlAvatarType.icon
    ),
    DlAvatar(
      size: DlAvatarSize.lg,
      type: DlAvatarType.icon,
      state: DlAvatarState.offline
    ),
    DlAvatar(
      size: DlAvatarSize.lg,
      type: DlAvatarType.icon,
      state: DlAvatarState.online
    ),
  ],
)
Copy

Discover more content

Figma
Github
Npm
LinkedIn

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version